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},
});
Related
I'm having some troubles trying to figure out how to edit a text thats already been made.
I have done most of the things and the one i'm stuck at is the button that updates the text to the new updated text. I can see the updated text when I use console.log but it doesn't update the text. Thats still the same. Below you can see the full code and I think the updateTodo function is done wrong.
export default function App() {
const [updateTaskId, setUpdateTaskId] = useState('');
const [updateTaskTitle, setUpdateTaskTitle] = useState('');
const [todos, setTodos] = useState([]);
const updateTodo = () => {
const todoAsync = [
...todos,
{
key: updateTaskId,
name: updateTaskTitle,
},
];
setTodos(todoAsync);
};
const renderitem = ({item}) => {
return (
<View
style={{
flex: 1,
backgroundColor: colors.card,
margin: 10,
elevation: 1,
borderRadius: 10,
padding: 10,
}}>
<View style={{flexDirection: 'row'}}>
<Fontisto
name={item.isChecked ? 'checkbox-active' : 'checkbox-passive'}
size={20}
color={colors.text}
onPress={() => checkTodo(item.key)}
/>
<TouchableOpacity
onLongPress={() => {
setUpdateModal(true);
setUpdateTaskTitle(item.name);
}}>
<Text
style={{
color: colors.text,
marginLeft: 20,
marginRight: 20,
}}>
{item.name}
</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Fontisto name="date" size={20} color={colors.text} />
<Text style={{marginLeft: 20, color: colors.text}}>{item.date}</Text>
</View>
<View
style={{
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Feather
name={item.notification ? 'bell-off' : 'bell'}
size={20}
color={colors.text}
onPress={() => checkNotification(item.key)}
/>
<Fontisto
name="trash"
size={20}
color={colors.text}
onPress={() => {
setModalVisible(true);
setDetails(item);
}}
/>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: colors.background}}>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={updateModal}
onRequestClose={() => {
setUpdateModal(!updateModal);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View style={{}}>
<TextInput
style={{backgroundColor: colors.background, marginTop: 10}}
onChangeText={name => setUpdateTaskTitle(name)}
value={updateTaskTitle}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 50,
}}>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
setUpdateTaskTitle('');
}}>
<Text>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
updateTodo(...todos, {name: updateTaskTitle});
setUpdateTaskTitle('');
console.log(updateTaskTitle);
}}>
<Text>Update</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View>
<Text style={{fontSize: 20, color: colors.text}}>Delete?</Text>
</View>
<View
style={{
flexDirection: 'row',
marginTop: 15,
}}>
<Text style={{color: colors.text}}>Completed: </Text>
<Fontisto
style={{marginLeft: 20}}
name={
details.isChecked ? 'checkbox-active' : 'checkbox-passive'
}
size={15}
color={colors.text}
/>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<Text style={{color: colors.text}}>Title: </Text>
<Text
numberOfLines={1}
style={{marginLeft: 15, marginRight: 15, color: colors.text}}>
{details.name}
</Text>
</View>
<Text style={{marginTop: 20, color: colors.text}}>
Created: {details.date}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 30,
}}>
<TouchableOpacity
onPress={() => {
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteTodo(details.key);
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: colors.Textinput,
elevation: 12,
}}>
<TextInput
style={{
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
}}
placeholder="What Tododay?"
placeholderTextColor="#000"
onChangeText={value => setTitle(value)}
value={title}
autoCapitalize="words"
/>
<Entypo
style={{
marginLeft: 1,
padding: 13,
backgroundColor: '#fff',
height: 49,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
}}
name="add-to-list"
size={25}
color="#000"
onPress={() => addTodo()}
/>
</View>
<View style={{flex: 1}}>
<FlatList
data={todos}
renderItem={renderitem}
ListEmptyComponent={emptyListComponent}
/>
</View>
</View>
);
}
Here is what you need to do.
make a copy of all todos
filter out the todo that you are about to update out of the todos array
concat a new todo with the new text to the array of todos
it should render as expected
const updateTodo = () => {
const todoAsync = [
...todos,
].filter((item) => item.id !== updateTaskId).concat([{
key: updateTaskId,
name: updateTaskTitle,
}])
setTodos(todoAsync);
};
Try this if you want to keep the same todo on the screen but only update the object key for name.
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};
import fire from '../config/fire';
const db = fire.firestore();
class InitialDb extends Component {
constructor(props) {
super(props);
this.state = {
schools: '',
students: '',
};
}
async componentDidMount() {
const { size: schools } = await db.collection('schools').get();
const { size: students } = await db.collection('students').get();
this.setState({ schools, students});
}
render() {
return (
<SafeAreaView>
{/* <StatusBar translucent backgroundColor='#1b75ce' />
<HC title='Dashboard' /> */}
<BackButton />
<View style={{ paddingTop: 10, marginBottom: 20 }}>
<View style={{ flexDirection: 'row' }}>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/schools.png')}
/>
<Text style={{ textAlign: 'center' }}>
Schools:{this.state.schools}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/asd.png')}
/>
<Text style={{ textAlign: 'center' }}>
Students:{this.state.students}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
<View
style={{ flexDirection: 'row' }}
// style={styles.basic1Style}
>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/def.png')}
/>
<Text style={{ textAlign: 'center' }}>
Office:50
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/abc.png')}
/>
<Text style={{ textAlign: 'center' }}>Attended:50</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
</View>
{/* <Text style={{ textAlign: "center" }}>
Swipe from left to right for menu
</Text> */}
<View style={{ marginBottom: 2 }}>
<Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 5 }}>
Search
</Text>
</View>
<Form style={{ marginLeft: 20 }}>
<View style={{ flexDirection: 'row' }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Division</Label>
<Input />
</Item>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Area</Label>
<Input />
</Item>
</View>
<View style={{ flexDirection: 'row', paddingTop: 20 }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Gang</Label>
<Input />
</Item>
<Item
style={{
borderBottomColor: 'white',
}}
>
<Button info style={{ marginLeft: 25 }}>
<Text> Search </Text>
</Button>
</Item>
</View>
</Form>
{/*<View style={{ flex: 1, marginTop: 3, left: 0, right: 0, bottom: 0 }}>
<MapView
initialRegion={{
latitude: 12.93092,
longitude: 77.602156,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
style={styles.mapStyle}
></MapView>
</View>
*/}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
basic1Style: {
// flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
widthstyle: {
width: Dimensions.get('window').width / 2,
},
mapStyle: {
position: 'absolute',
top: 3,
left: 0,
right: 0,
bottom: 0,
},
});
export default InitialDb;
**This code above is working synchronously and also in series manner. I want this to be in async and await because this is freezing the UI. And also it should update the all 2 state objects after getting the size of all those 2 firestore collections using promise.all.
Here I have updated the code Please check it again **
PROBLEM
The problem here is basically your firebase is initializing on every hot-module reload. You only need to initialize once per App.
So basically, you could wrap your firebase initialization with try-catch and swallow the error.
try {
firebase.initializeApp({
/** config here **/
});
} catch(err) {
console.log(err);
}
so i got this object that i pass as data to my react native flatlist
<FlatList
extraData = {this.state}
data = {this.state.data_n1}>
renderItem = {({item, index}) => {
this.state.data_n2.forEach(aux => {
if(item.id == aux.id) {
return(<View><Text>Display first stuff</Text></View>);
} else {
return(<View><Text>Display second stuff</Text></View>);
}
}
}
/>
the whole idea is compare both objects, if the data_n2 contains the same id from the data_n1, the display the data from the data_n2, if not, just display from data_n1, problem is, i'm displaying this whenever i click on a calendar strip, so if i click on day june 1st, that day should display data_n2, if i click on day june 2nd, THAT one should display the data_n1.
does this work with flatlist or virtualizedlist (if i had to swap), or i need to render a flatlist for each data?
Edit: tested hao wu answer, but got this
Edit n2: i'll post the code, but keep in mind data_n1 is this.state.listaImputacionDia and this.state.listaImputacionDia is data_n2
this is the calendar strip code
<CalendarStrip
calendarHeaderStyle={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#707070",
paddingBottom: hp('4.5%')
}}
selectedDate={this.state.selectedDate}
onDateSelected={async (date) => {
await HoursReportHistoryBusiness.GetInstance().getListHoursReportRequest();
this.setState({ selectedDate: moment(date).format('YYYY-MM-DD') });
this.setViewHourHistory();
console.log(this.state.listaImputacionDia);
}}
minDate={moment().subtract(3, 'days')}
maxDate={moment().add(3,'days')}
startingDate={moment().subtract(3, 'days')}
useIsoWeekday={false}
style={{paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}
highlightDateNameStyle={{color: '#1062cc'}}
highlightDateNumberStyle={{color: '#1062cc'}}
disabledDateNumberStyle={{color: '#f21927'}}
disabledDateNameStyle={{color: '#f21927'}}
customDatesStyles={this.customDatesStyle}
dateNameStyle={{color: '#c4c4c4'}}
dateNumberStyle={{color: '#c4c4c4'}}
disabledDateOpacity={1}
/>
this is the flatlist
<FlatList
extraData={this.state.listaImputacionDia}
data={this.state.dataSource}//{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
renderItem={({ item, index }) => {
if (this.state.listaImputacionDia.length != 0) {
const found = this.state.listaImputacionDia.filter(aux => item.id == aux.IdProyecto);
//this.state.listaImputacionDia.forEach(aux => {
if (found/*item.id == aux.IdProyecto*/) {
console.log('la wea' + found);
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={}>{found.Title}</Text>
<Text style={}>{`ID ${found.Id} - ${found.Cliente}`}</Text>
{
!found.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${found.HorasTrabajadas}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={{
padding: 0,
margin: 0,
fontSize: rfv(16),
paddingVertical: hp('1.2%'),
fontWeight: 'normal',
fontStyle: 'normal',
textAlign: 'left',
color: found.etapa != '' ? '#1a1a1a' : '#c4c4c4',
}}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{found.HorasTrabajadas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
)
}
else {
console.log('no encontro un favorito');
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={{
alignSelf: 'center',
width: wp('95.7%'),
height: hp('10%'),
backgroundColor: "#ffffff",
}} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={} >{found.title}</Text>
<Text style={}>{`ID ${found.id} - ${found.cliente}`}</Text>
{
!item.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${20}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{found.horas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
);
}
//})
}
else {
console.log('imputacion por dia esta vacio');
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={{
alignSelf: 'center',
width: wp('95.7%'),
height: hp('10%'),
backgroundColor: "#ffffff",
}} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={}>{item.title}</Text>
<Text style={}>{`ID ${item.id} - ${item.cliente}`}</Text>
{
!item.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${10}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{item.horas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
);
}
}}
/>
forEach only returns undefined, no matter what you return in the function.
You could find the element first, and then render it conditionally:
<FlatList
extraData={this.state.data_n2}
data={this.state.data_n1}>
renderItem = {({ item, index }) => {
const found = this.state.data_n2.find(aux => item.id == aux.id);
if (found) {
return (<View><Text>Display first stuff: {found.id}</Text></View>);
} else {
return (<View><Text>Display second stuff: {item.id}</Text></View>);
}
}}
/>
If there are possibly multiple matches:
<FlatList
extraData={this.state}
data={this.state.data_n1}>
renderItem = {({ item, index }) => {
const found = this.state.data_n2.filter(aux => item.id == aux.id);
if (found.length > 0) {
return (
<View>{
found.map(e => (<View><Text>Display first stuff: {e.id}</Text></View>))
}</View>
);
} else {
return (<View><Text>Display second stuff</Text></View>);
}
}}
/>
I have to use both KeyboardAvoidingView and ScrollView at the same time.
But my problem is that it doesn't work at all.
Also I tried KeyboardAwareScrollView, but it didn't work either.
My screen should function like it.
this is my code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
< KeyboardAwareScrollView
style={{ flex: 1 }}
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth,
flex: 1
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</ScrollView>
</KeyboardAvoidingView>
);
}
use KeyboardAwareScrollView code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : null}
enabled
>
<ScrollView
contentContainerStyle={{ flex: 1 }}
keyboardShouldPersistTaps="always"
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
Please help me to solve this problem.
Thank you in advance
The screens of Android and iOS were different, and in the case of Android screens, I gave up Scroll and focused on keyboardavoiding.
Android use: KeyboardAvoidingView
ios use : KeyboardAwareScrollView
usepage.js
import React, { Component } from "react";
import {
View,
TextInput,
Image,
StyleSheet,
Dimensions,
KeyboardAvoidingView,
Platform,
Text,
TouchableOpacity,
Alert,
ActivityIndicator
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { Ionicons } from "#expo/vector-icons";
import { NavigationActions } from "react-navigation";
class RegisterWalletScreen2 extends Component {
constructor(props) {
super(props);
this.state = {
walletname: "",
passwordconfirm: "",
password: "",
wallet: "",
disabled: false
};
}
static navigationOptions = ({ navigation }) => {
return {
headerLeft: (
<TouchableOpacity
style={{ paddingLeft: 15 }}
onPress={() => navigation.navigate("FirstAgreeStack")}
>
<Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
</TouchableOpacity>
),
headerRight: null
};
};
render() {
if (Platform.OS === "ios") {
return this.state.wallet === "" ? (
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<ActivityIndicator size="large" />
</View>
) : (
<KeyboardAwareScrollView
style={{ backgroundColor: "#4c69a5" }}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}
>
<View style={{ height: "92%" }}>
<View
style={{
flexDirection: "row",
paddingLeft: 30,
paddingTop: 22
}}
>
<Image
source={require("../../image/minigroup.png")}
style={{
resizeMode: "stretch"
}}
/>
<View
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
</View>
<View
style={{
paddingLeft: "9%",
paddingBottom: "28%"
}}
>
<Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
<Text style={{ fontSize: 16, marginTop: 10 }}>
{`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
</Text>
<Text
style={{
paddingTop: 22,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 입력해주세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="nickname"
// autoFocus={true}
underlineColorAndroid={"#f6f6ef"}
/>
<View style={{ flexDirection: "row" }}>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호
</Text>
<Text
style={{
paddingTop: 30,
paddingBottom: 8,
fontSize: 12,
color: "#434343",
paddingLeft: 7
}}
>
영문/숫자 조합,8자리 이상
</Text>
</View>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={"비밀번호를 설정해주세요."}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력해주세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
</View>
</View>
<View style={{ height: "8%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={async () => {
if (this.state.password.length < 8) {
Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
} else {
if (this.state.password !== this.state.passwordconfirm) {
Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
}
if (this.state.password === this.state.passwordconfirm) {
Alert.alert("안내", "잠시만 기다려주세요.");
this.setState({
disabled: true
});
await this.createKeystore();
await this.download();
this.props.navigation.navigate("RegisterWallet3", {
walletname: this.state.walletname,
publicaddress: this.state.address,
v3: this.state.keystore
});
}
}
}}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
);
} else {
return this.state.wallet === "" ? (
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<ActivityIndicator size="large" />
</View>
) : (
<KeyboardAvoidingView
behavior="position"
keyboardVerticalOffset={keyboardVerticalOffset}
style={styles.container}
>
<View style={{ height: "92%" }}>
<View
style={{
flexDirection: "row",
paddingLeft: 30,
paddingTop: 22
}}
>
<Image
source={require("../../image/minigroup.png")}
style={{
resizeMode: "stretch"
}}
/>
<View
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
</View>
<View
style={{
paddingLeft: "9%"
}}
>
<Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
<Text style={{ fontSize: 16, marginTop: 10 }}>
{`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
</Text>
<Text
style={{
paddingTop: 22,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 입력해주세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="nickname"
// autoFocus={true}
underlineColorAndroid={"#f6f6ef"}
/>
<View style={{ flexDirection: "row" }}>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호
</Text>
<Text
style={{
paddingTop: 30,
paddingBottom: 8,
fontSize: 12,
color: "#434343",
paddingLeft: 7
}}
>
영문/숫자 조합,8자리 이상
</Text>
</View>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={"비밀번호를 설정해주세요."}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력해주세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
</View>
</View>
<View style={{ height: "8%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={async () => {
if (this.state.password.length < 8) {
Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
} else {
if (this.state.password !== this.state.passwordconfirm) {
Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
}
if (this.state.password === this.state.passwordconfirm) {
Alert.alert("안내", "잠시만 기다려주세요.");
this.setState({
disabled: true
});
await this.createKeystore();
await this.download();
this.props.navigation.navigate("RegisterWallet3", {
walletname: this.state.walletname,
publicaddress: this.state.address,
v3: this.state.keystore
});
}
}
}}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
}
const keyboardVerticalOffset = -180;
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
flex: 1
},
walletscreen2textinput: {
width: "90%",
// height: "10%",
height: 40,
paddingHorizontal: 10,
backgroundColor: "#f6f6ef"
},
walletscreen2button: {
height: "100%",
backgroundColor: "#797771",
alignItems: "center",
justifyContent: "center",
width: "100%"
}
});
export default RegisterWalletScreen2;
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);
}
}