so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.
my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.
This is the screen code:
<SafeAreaView style={styles.root}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior='padding'
keyboardVerticalOffset={-200}>
<ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
<Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
<BgImage path={require('../../../assets/images/phone-city.png')} />
<View style={styles.container}>
<Text style={styles.title}>Från</Text>
<TextInput
ref={inputRef}
placeholder='dit namn'
autoCorrect={false}
onSubmitEditing={() =>
props.navigation.navigate('Person Selected')
}
returnKeyType='next'
style={styles.textInput}
placeholderTextColor={placeholderTextColor}
/>
<Text style={styles.paragraph}>
Skriv in vem du är så mormor vet vem träningsprogrammet kommer
ifrån.
</Text>
</View>
<NavButton
style={styles.button}
title='Nästa'
onPress={() => props.navigation.navigate('Capture Image')}
/>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
this is the screen styles:
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.blue
},
container: {
marginHorizontal: 20
},
title: {
color: colors.white,
fontSize: wp('15%')
},
textInput: {
color: colors.white,
fontSize: wp('15%'),
lineHeight: 60,
opacity: 0.5
},
paragraph: {
color: colors.white,
fontSize: wp('6%')
},
button: {
marginHorizontal: 20,
marginBottom: hp('6%'),
alignSelf: 'flex-end'
}
});
these are the navButton code:
<View style={[styles.navButtonContainer, props.containerStyle]}>
<TouchableOpacity
style={[
styles.navButton,
props.style,
{ backgroundColor: dynamicBackgroundColor }
]}
onPress={props.onPress}>
<Text style={[styles.title, { color: dynamicColor }]}>
{props.title}
</Text>
{DynamicIcon}
</TouchableOpacity>
</View>
this are the navbutton styles:
const styles = StyleSheet.create({
navButtonContainer: {
marginTop: 'auto'
},
navButton: {
backgroundColor: colors.blue,
marginLeft: 'auto',
width: wp('45%'),
height: wp('13%'),
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 500,
paddingHorizontal: wp('5%'),
alignItems: 'center'
},
title: {
color: colors.white,
fontSize: wp('6%')
}
});
so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?
regards.
Related
Images show fine in the iOS simulator but when I open the android simulator.. everything gets mixed up.. what should I do to solve this issue? I honestly don't know how to fix this. so please if there's anyone that can solve this.. would really appreciate it.
So this is the Android emulator. I don't know why the image is like this.
this is on iOS simulator, and how it must be.
Home.js
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import { MaterialCommunityIcons } from "#expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
>
<View style={{ height: 180, width: 50 }}>
<Image source={require("../home/homepage.jpeg")} />
</View>
</ScrollView>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
alignItems: "center",
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
borderColor: "grey",
height: 50,
width: 230,
shadowOpacity: 0.5,
borderWidth: 0.5,
paddingTop: 10,
backgroundColor: "lightblue",
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<Location
imageUri={require("../home/nicosia.jpg")}
name="Nicosia"
/>
<Location
imageUri={require("../home/kyrenia.jpg")}
name="Kyrenia"
/>
<Location
imageUri={require("../home/famagusta.jpg")}
name="Famagusta"
/>
<Location
imageUri={require("../home/lefke.png")}
name="Lefke"
/>
</ScrollView>
</View>
<View style={{ marginTop: 40, paddingHorizontal: 20 }}>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="face-agent"
size={30}
style={{ paddingLeft: 10, color: "lightblue" }}
/>
</View>
24/7 customer support
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Rest easy knowing that everyone in \nthe Rent in cars community is screened, \nand 24/7 customer support and \nroadside assistant are just a tap away."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="car"
size={30}
style={{
paddingLeft: 10,
color: "lightblue",
marginTop: 20,
}}
/>
</View>
Endless options
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Choose from hundreds of models\nyou won't find anywhere else. Pick it \nup or get it delivered where you \nwant it."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="security"
size={30}
style={{ paddingLeft: 10, color: "lightblue" }}
/>
</View>
Drive confidently
</Text>
<Text style={{ paddingLeft: 80, marginTop: 20 }}>
{
"Drive confidently with your choice \nof protection plans - all plans \ninclude varying levels of third party \nliability insurance from Liberty \nMutual and physical damage \nprotection from Rent in Car that caps\nyour out of pocket responsibility for \ndamage to your host's car during \nyour trip."
}
</Text>
</View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
red: {
color: "red",
},
});
}
Define width and height and resizeMode :
<View style={{width:"100%", height:180}}>
<Image
style={{
width: "100%",
height: 180
}}
resizeMode="cover"
source={require("../home/homepage.jpeg")}
/>
/>
How can I disable only horizontal scrolling on my FlatList? Putting it to false doesnt work. I want to be able to scroll it vertically but not horizontally.
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
FriendItem's return. FriendItem is the renderItem which is being used in the FlatList:
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
Edit:
When there are 4 items, it seems to be okay but as soon as another item is added to the list, the last item is disturbed and is overlapped with the footer? of the app.
It should actually be behind it so that we can scroll down and see the next items.
horizontal parameter is not related to horizontal scroll.
https://reactnative.dev/docs/flatlist#horizontal
If true, renders items next to each other horizontally instead of stacked vertically.
Your 'scroll issue' is your FriendItem , the issue is the width: moderateScale(360).
If you want your item be full width, with margin, you can just remove it.
Example with moderateScale(360)
Example removing width
item: {
backgroundColor: "white",
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
justifyContent: "space-between",
flexDirection: "row",
}
Hope it helps you.
Regards,
I have a sign-up screen "Inputs", I want when user select input doesn't hide other, so I wrap it inside <KeyboardAvoidingView> and set behavior "padding" but after choosing some input I see a View cover all my content so I can't see any things "just white View"
So maybe I made something wrong when using it, how can I handle it?
ScreenShot
here's my code
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 200,
})()}>
<ScrollView>
<View style={styles.imgContainer}>
<Image
style={styles.imgStyle}
resizeMode="cover"
source={require('../../assets/Logo.png')}
/>
</View>
<View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-person"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({userName: value})}
value={userName}
style={styles.inputStyle}
placeholder="Name"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.NameValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-at"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({email: value})}
value={email}
style={styles.inputStyle}
placeholder="Email"
keyboardType="email-address"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.emailValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-call"
size={20}
color="#ddf"
/>
<TextInput
style={styles.inputStyle}
placeholder="mobile"
onChangeText={value => this.setState({phoneNumber: value})}
value={phoneNumber}
keyboardType="phone-pad"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.phoneValid}</Text>
</View>
<View style={{...styles.inputContainer, marginBottom: 0}}>
<Icon
style={styles.iconStyle}
name="md-lock"
size={20}
color="#ddf"
/>
<TextInput
secureTextEntry
style={styles.inputStyle}
placeholder="Password"
value={password}
onChangeText={value => this.setState({password: value})}
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.passwordValid}</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
onPress={() => this.signUp()}
style={styles.btnStyle}>
<Text style={[styles.textStyle, {color: '#fff', fontSize: 20}]}>
Sign Up
</Text>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={[styles.textStyle, {opacity: 0.7}]}>
Do you have account?
</Text>
<TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
<Text style={styles.textStyle}> sign In </Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
Style
const styles = StyleSheet.create({
container: {
flex: 1,
},
imgContainer: {alignItems: 'center', marginVertical: 25},
imgStyle: {width: 250, height: 150},
inputContainer: {
margin: 15,
marginBottom: 20,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 30,
flexDirection: 'row',
alignItems: 'center',
},
iconStyle: {
marginLeft: 15,
},
inputStyle: {
padding: 10,
width: '85%',
textAlign: I18nManager.isRTL ? 'right' : 'left',
},
buttonsContainer: {
margin: 15,
marginBottom: 20,
justifyContent: 'flex-end',
},
btnStyle: {
backgroundColor: '#1E558E',
alignItems: 'center',
justifyContent: 'center',
padding: 15,
borderRadius: 30,
},
textContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 25,
},
textStyle: {color: '#1E558E', fontSize: 17},
});
I have custom header which has TextInput for searching in StackNavigator.How can i get result on onChangeText of TextInput on particular class,
here is demo:
const StackNavigator = createStackNavigator({
TABS: {
screen: TabNav,
navigationOptions: ({ navigation }) => {
return {
header:
<View style={{ backgroundColor: '#025281', flexDirection:
'row', alignItems: 'center', height: 60 }}>
<TouchableOpacity
style={{ paddingLeft: 5 }}>
<Image source={require(back_arrowimg)} style={{
width: 25, height: 25, resizeMode: 'contain' }}/>
</TouchableOpacity>
<TextInput
style={{ color: 'white', paddingLeft: 15, }}
type='text'
placeholder={headerTitle}
onChangeText={this.loadUsers}
/>
</View>,
}
} },
[ConstFile.SCREEN_TITLES.WELCOME_SEARCH]: {
screen: WELCOMESEARCH,
navigationOptions: {
header: null
} }, } )
from navigationOption you can not do anything to other screen,
so what you can do is, move your header code into another file and use it as component in TabNav
something like this,
let say Header.js
<View style={{ backgroundColor: '#025281', flexDirection:
'row', alignItems: 'center', height: 60 }}>
<TouchableOpacity
style={{ paddingLeft: 5 }}>
<Image source={require(back_arrowimg)} style={{
width: 25, height: 25, resizeMode: 'contain' }}/>
</TouchableOpacity>
<TextInput
style={{ color: 'white', paddingLeft: 15, }}
type='text'
placeholder={headerTitle}
onChangeText={this.props.loadUsers} // see this change
/>
</View>
and in your TabNav.js use header as component,
<Header
loadUsers={(...your params)=>{
//do your necessary stuffs to display data in this file
}) />
I have a component that is navigated to from the drawer menu,the name of the component is Servicecategory, now I want to navigate to a another component from this Servicecategory, The name of this component is Home, this Home component conatains a view pager, I want to navigate to home component and change the view pager to a specific page on navigate from ServiceCategory i.e this.setpage(0), is this possible, this is my code below
SERVICECATEGORY
import { connect } from "react-redux";
import { trueBrowse,trueCart, trueHome, trueMessages, trueServices,falseBrowse,
falseCart, falseHome,falseMessages, falseServices} from "../actions/index";
const mapStateToProps = state => {
return { home: state.home, browse: state.browse,cart: state.cart, messages: state.messages };
};
const mapDispatchToProps = dispatch => {
return {
trueBrowse: browse => dispatch(trueBrowse(browse)),
trueServices: services => dispatch(trueServices(services)),
trueHome: home => dispatch(trueHome(home)),
trueMessages: messages => dispatch(trueMessages(messages)),
trueCart: cart => dispatch(trueCart(cart)),
falseServices: services => dispatch(falseServices(services)),
falseMessages: messages => dispatch(falseMessages(messages)),
falseHome: home => dispatch(falseHome(home)),
falseCart: cart => dispatch(falseCart(cart)),
falseBrowse: browse => dispatch(falseBrowse(browse))
};
};
class reduxServicesCategory extends Component {
static navigationOptions = {
header: null,
drawerLockMode: 'locked-closed'
};
stateChanger() {
this.props.trueHome("home");
this.props.falseMessages("messages");
this.props.falseBrowse("soo");
this.props.falseCart("cart");
this.props.trueServices("services");
//ON navigate to Land, I want to change the view of the view pager, that is currently in land
this.props.navigation.navigate('Land');
}
constructor(props) {
super(props);
this.state = {
search: false
};
}
showSearch(){
this.setState({search: true},);
};
render(){
return(
<View style={styles.container}>
<View style={{flexDirection: 'row',height: 80,backgroundColor: '#fcfcfc',
marginBottom: 15,
justifyContent: 'center',width: '100%',alignItems: 'center' }}>
<TouchableNativeFeedback onPress={() => this.props.navigation.goBack(null)}>
<MaterialCommunityIcons style={{position: 'absolute',left: 10,top: StatusBar.currentHeight
}} name="arrow-left" size={30} color="#535461"/>
</TouchableNativeFeedback>
{this.state.search?
<TextInput
autoFocus={true}
ref="search"
placeholder="Search..."
returnKeyType={'search'}
placeholderStyle={{fontSize: 20, fontFamily: 'mont-semi',}}
placeholderTextColor="#000"
underlineColorAndroid={'transparent'}
style={{
position: 'absolute',top: StatusBar.currentHeight-5,
backgroundColor: '#fcfcfc',width: '65%',alignSelf: 'center',
fontSize: 20, fontFamily: 'mont-medium', color: '#000',
}}/>:<Text style={{fontFamily: 'mont-semi',
fontSize: 20,
color: '#000',}}>
Service Category
</Text>}
{this.state.search?
<TouchableNativeFeedback onPress={() => this.setState({search: false})}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="cancel" size={30} color="#535461"/>
</TouchableNativeFeedback>:
<TouchableNativeFeedback onPress={this.showSearch.bind(this)}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="search" size={30} color="#535461"/>
</TouchableNativeFeedback>}
</View>
<ScrollView>
<View style={{flexDirection: 'row',marginBottom: 25,
justifyContent: 'space-evenly'}}>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
</View>
LANDCOMPONENT(HOME)
<ViewPagerAndroid style={{flex: 1}} initialPage={0}
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}>
<View style={{flex: 1}} key="1">
{this.props.services ?
<View style={{
width: '100%',
marginTop: 10,
}}>
<Services navigation={this.props.navigation}/>
</View>
<View style={{flex: 1}} key="2">
<Messages/>
</View>
<View style={{flex: 1}} key="3">
<Browse navigation={this.props.navigation}/>
</View>
APP.JS(Drawer)
const screens = createStackNavigator({
Home: {
screen: ServiceDetail,
},
Signup: {
screen: Signup
},
Login: {
screen: Login
},
Land: {
screen: Home,
},
Find: {
screen: Find
},
Shop: {
screen: Shop
},
SetCat: {
screen: ServicesCategory
},
ServiceProfile: {
screen: ServiceProfile
},
ServiceDetail: {
screen: On,
},
JobBid: {
screen: JobBid
}
});
const RootStack = DrawerNavigator(
{
drawer: {
screen: screens
}
},
{
drawerWidth: Width * (80 / 100),
contentComponent: (props) => (
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<LinearGradient colors={['#EE8F62', '#f2ac88']}
style={{width: '100%', height: 190}}>
<View style={{
flex: 1, flexDirection: 'row', alignItems: 'center',
paddingTop: 20, justifyContent: 'center', alignContent: 'center'
}}>
<View style={{
width: 150, height: 150,
borderRadius: 150 / 2,
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./profile.png')}/>
</View>
<View style={{flexDirection: 'column', marginBottom: 13}}>
<Text style={{fontFamily: 'mont-semi', color: '#fff', fontSize: 20}}>
Jane Doe</Text>
<Text style={{fontFamily: 'mont', color: '#fcfcfc', fontSize: 18, marginTop: 10}}>
Profile</Text>
</View>
</View>
</LinearGradient>
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Shop', {})}>
<View style={{
height: 60,
width: '100%',
backgroundColor: '#fcfcfc',
flexDirection: 'row',
paddingLeft: 20,
paddingRight: 10,
paddingTop: 10,
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row', height: 40,
width: '100%', backgroundColor: '#f2f2f2', borderRadius: 3,
alignItems: 'center', paddingLeft: 10
}}>
<View style={{height: 21, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./cart.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#F3B690'
}}>Shop by Category</Text>
</View>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('SetCat', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./recruitment.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sẹlẹ Services</Text>
</View>
</TouchableNativeFeedback>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./payment-method.png')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sell on Sẹlẹ</Text>
</View>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Login', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 21, width: 23}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./account.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>My Account</Text>
</View></TouchableNativeFeedback>
</View>
</View>
)
},
{
initialRouteName: 'Home',
}
, {}
);
I think you should use componentDidUpdate
Like this
componentDidUpdate(){
if(this.props.home && this.props.services){
this.viewPager.setPage(0);
}
}