In our React-native project, We have a screen which is having a parent Scrollview(with pull to refresh) and with in scrollview we have Listview (as chilld view).
In iOS we are able to scroll Scrollview(Parent) as well as Listview(child view).
But in android, We are not able to scroll the Child Listview. When we try to scroll the child Listview, The Parent view is getting scrolled. The child view is not getting the Touch.
Is this related to React-native issue? Can anyone tell me how to solve this issue?
Code snippet:
<ScrollView contentContainerStyle={styles.contentContainerStyle} refreshControl={this.getRefreshControl()}>
<View> Some header </View>
<MyComponent> </MyComponent>
<ListView /* This list view is not scrolling in Android */
dataSource={dataSource}
initialListSize={10}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}/>
</ScrollView>
I've done a ListView which is scrollable if you want !
ListBillScreen.js
export default class ListBillScreen extends React.Component{
/*Constructor*/
render() {
return (
<ScrollView style = {styles.container}>
<View style ={styles.header}>
<Text style = {styles.textHeader}> Title</Text>
</View>
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} navigator={this.props.navigator} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style=
{styles.separator} />}
/>
<AndroidBackButton
onPress={this.popIfExists.bind(this)}
/>
</ScrollView>
);
}
}
Styles
import { StyleSheet } from 'react-native'
import { Colors, Metrics } from '../../Themes'
export default StyleSheet.create({
container: {
paddingTop: 20,
backgroundColor: Colors.background
},
separator: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
textHeader: {
color: Colors.steel,
textAlign: 'center',
},
image: {
height:64,
width: 64,
},
listView: {
paddingTop: 10,
paddingBottom: 20
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
})
It's fully scrollable even if you add some rows =) (My rows are created with a JSon File, with the Row.js)
Enjoy !
i think ur listview is small . Try setting flex: 1 or height: 587 on your ListView's style property. –
Both listview and scrollview touch events are conflicting.
Try using below code in your fragment/activity
listview.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
You need to set nestedScrollEnabled = true for ListView.
Related
Scrollview scrolls to the bottom normally but when I touch the TextInput and the keyboard pops up, it scrolls only a very short distance and I am not able to look at the content below.
Just focus on android as of now
android:windowSoftInputMode="adjustPan"
My code:
const Welcome = ({}) => {
return (
<View style={{flex:1}>
<View style={{height: RFValue(33), backgroundColor: '#B1C59B'}} />
<Main/>
</View>
);
};
where the Main component contains the scrollView
const Main = () => {
return (
<ScrollView
keyboardShouldPersistTaps="always"
contentContainerStyle={styles.container}>
{CONTENT}
</Scrollview>
)
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
Try adding flex:1 in your container style like
container:{
flex: 1,
}
Above Scrollview take SafeAreaView and give SafeAreaView flex:1 then your problem must be solved.
I need to change the color of the ActivityIndicator to black but only in this area of the app. I do not want to change it anywhere else. Does anyone know how to change its color for both Android and iOS?
<ActivityIndicator
style={{position: 'absolute', right: 20, margin: 0, padding: 0}}
animating={true}
size='small'
/>
<ActivityIndicator color="#000000"/>
You can check more props in the official documentation
You can make a reusable component and override the color where ever you want.
Spinner.js:
import { View, ActivityIndicator } from "react-native";
const Spinner = props => {
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator color={props.color || "#000000"} />
</View>
);
};
const styles = {
spinnerStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
};
export default Spinner;
By the way, you can set that #000000 as the default color!
And where you want to use it, just import that in that file and use it as a component:
YourFile.js:
import React, { Component } from "react";
import { View } from "react-native";
import Spinner from "PATH_TO_SPINNER/Spinner";
class MyClass extends Component {
render() {
return (
<View>
<Spinner color="#663399" />
</View>
);
}
}
You need to add color as a prop to your ActivityIndicator like the code below.
<ActivityIndicator
style={{position: 'absolute', right: 20, margin: 0, padding: 0}}
animating={true}
size='small'
color='#fff'
/>
You can see more about it ActivityIndicator
If you want to use other styles of ActivityIndicator, it is a good plugin to use ActivityIndicator Collection
What I wanna do is creating a frame layout just like android's FrameLayout and I have failed several times reasonably. That's why I am here.
Expected scene:
1: Creating a map view in the bottom layer.(Native component)
2: Showing a marker on the map view. (Native component as above)
3: Placing a search widget on the top frame.(React component)
Here is the layout in a react-native page, named page.js:
<MapLayout>
<TextInput style={ marginTop: 20, borderRadius: 5, padding: 5, marginLeft: 16, marginRight: 16, width:100, height: 100 ,backgroundColor:'red'}} placeholder='search'></TextInput>
</MapLayout>
Note:MapLayout is a native component from android, which extends from FrameLayout and can be exported to React-Native. There is a MapView widget in the bottom layer as a background, probably with a overlay on the map.
Give me a hand please. Thanks for all kindness first.
you can do frame layout using this way
import React, { Component } from "react";
import { Animated, View, StyleSheet, Easing, Text } from "react-native";
class A extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
handleAnimation = () => {
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 500,
easing: Easing.ease
}).start();
};
render() {
return (
<View style={styles.container}>
<View style={styles.layer1} />
<View style={styles.overLay}>
<Text>This is an overlay area</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
layer1: {
height:100,
backgroundColor: "lightgreen",
},
overLay: {
height: 100,
width: "100%",
backgroundColor: "#00000070",
position: "absolute",
}
});
export default A;
My js is abit rusty and im abit confused about how to update the state after a swipe event in my react-native android app. Im trying to hookup this ViewPager based on the official ViewPager and i just want to get the pagenum to update when the slider slides to that page. Any help on how?
The slider itself works, but im confused about how to update state based on events or callbacks. What i really wish to do is update the background color styling of the parent view after each page slide.
Welcome Page
import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';
var AboutPage1 = require('../about/AboutPage1');
var AboutPage2 = require('../about/AboutPage2');
class WelcomeScreen extends Component {
state = {
pagenum: 0
};
render() {
<View >
// the parent view i wish to change bgcolor
<View style={{flex:1}}>
// this is the viewpager
<IndicatorViewPager
indicator={this._renderDotIndicator()}
onPageScroll={this.onPageScroll}
onPageSelected={this.onPageSelected}
onPageScrollStateChanged={this.onPageScrollStateChanged}
ref={viewPager => { this.viewPager = viewPager;
}}>
// some components in this first view
<View onPress={this.onPageSelected.bind(this,this.pagenum)}>
// some components
</View>
// these are just views wrapping pages that are themselves views
<View onPress={this.onPageSelected.bind(this,this.pagenum)}>
<AboutPage1 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
<Text>{'count' + this.state.pagenum}</Text>
</View>
<View>
<AboutPage2 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
<Text>{'count' + this.state.pagenum}</Text>
</View>
</IndicatorViewPager>
</View>
</View>
);
}
_renderDotIndicator() {
return (
<PagerDotIndicator
pageCount={5}
/>
);
}
// callback that is called when viewpager page is finished selection
onPageSelected(e) {
console.log('state is: '+this.state)
this.SetState({pagenum: this.state.pagenum+1});
console.log('state is: '+this.state)
}
}
About Page
<View>
<Text>Welcome to My App</Text>
</View>
Error
error: 'undefined is not an object when evaluating this.state.pagecount
You should bind this keyword.Like this:
<IndicatorViewPager
indicator={this._renderDotIndicator()}
onPageScroll={this.onPageScroll.bind(this)}
onPageSelected={this.onPageSelected.bind(this)}
onPageScrollStateChanged={this.onPageScrollStateChanged.bind(this)}
ref={viewPager => { this.viewPager = viewPager;
}}>
...
</IndicatorViewPager>
You might be mixing up two different plugins but using ViewPager from '#react-native-community/viewpager', What you want to achieve can be done as follows (Notice the use of onPageSelected and the handler);
<ViewPager
pageMargin={10}
style={styles.viewPager}
initialPage={currentPageIndex}
onPageSelected={(eventDate) => this.handleHorizontalScroll(eventDate.nativeEvent)}
>
{pages.map((item) => (
<Card style={{ elevation: 3, margin: 50, borderRadius: 10, backgroundColor }}>
<CardItem header style={{ borderRadius: 10, backgroundColor }} bordered>
<Text>Card Header</Text>
</CardItem>
<CardItem style={{ flex: 1, borderBottomWidth: 0.2, backgroundColor }}>
<ScrollView>
<Text style={{ fontFamily, color, fontSize, textAlign: 'justify' }}>
{item.text}
</Text>
</ScrollView>
</CardItem>
<CardItem style={{ borderRadius: 10, backgroundColor }}>
<Text>Card Footer</Text>
</CardItem>
</Card>
))}
</ViewPager>
Your horizontal Scroll handler or onPageSelectedHandler should then be something like this:
handleHorizontalScroll = ({ position }) => {
console.log('Current Card Index', position);
this.setState({currentIndex: position})
};
I am trying to use the react-native-chart-android library for including charts in my android app.
I installed the module successfully and went through the provided examples as is. Everything went fine without errors but the graphs are not getting rendered somehow.
I am trying out the LineChart (which is itself in a separate View) within a ScrollView along with ToolbarAndroid and one more View on the same level on RN 0.20. Do let me know if I am missing something.
Thanks in advance.. :)
PS: Code snippet for reference (removed the trivial parts of the code for better visualisation)
import {
LineChart
} from 'react-native-chart-android';
class Dashboard extends Component {
render() {
return (
<ScrollView style={styles.scrollView}>
<ToolbarAndroid ... />
<View style={styles.container}>
...
</View>
<View style={styles.chartContainer}>
<LineChart style={{flex:1}} data={this.getLineData()}/>
<LineChart
style={{flex:1}}
data={this.getRandomData()}
visibleXRange={[0,30]}
maxVisibleValueCount={50}
xAxis={{drawGridLines:false,gridLineWidth:1,position:"BOTTOM"}}
yAxisRight={{enable:false}}
yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART"}}
drawGridBackground={false}
backgroundColor={"BLACK"}
description={"description"}
legend={{enable:true,position:'ABOVE_CHART_LEFT',direction:"LEFT_TO_RIGHT"}} />
</View>
<Text style={styles.description}>{this.state.message}</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF'
},
scrollView: {
flex: 1
},
chartContainer: {
flex: 1
}
});
I had same problem, my conclusion was that ScrollView renders only children with height and width. Although you set flex:1 around charts, I think they are larger then ScrollView and that's why they are not visible inside of ScrollView. I've set height and width to my charts, and gave them min and max Y -> if you set flag startAtZero:false you should set axisMinValue and axisMaxValue. For example: yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART", axisMinValue: 20, axisMaxValue: 500}}
And for charts try to set custom width and height:
chartContainer: {
flex: 1,
height: 500, //any value you want
width: 500 //any value you want
}
I've set half of device height and full width with Dimensions:
import { Dimensions } from 'react-native';
var {height, width} = Dimensions.get('window');
chartContainer: {
flex: 1,
height: height/2,
width: width
}
And after that my charts are visible inside of ScrollView!
Hope it helps! :)