We Keep Coding

How to make my Bottom Bar fixed in React Native?

Hey
I have my bottom bar out the Scroll View component,But it still scroll with the other components.
How can i make it fixed ?
"
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
<Divider width={1} />
<BottomTabs />
</SafeAreaView>
"
Entire Code Screen

You can use flex proportions to separate the and components, as below
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15, flex : 1 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<View style= {{flex : 3 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
</View>
<View style= {{flex : 1 }}>
<Divider width={1} />
<BottomTabs />
</View>
</SafeAreaView>

You can do it by styling your button component as -
<TouchableOpacity
style={{
width: 60,
height: 60,
backgroundColor: 'red',
position: 'absolute',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => {
console.log('Button Pressed')
}}
>
<Text>Hello Bottom Button</Text>
</TouchableOpacity>

"undefined is not an object", need to check if allNotes array is empty. How?

Feel like this is kind of a silly question but I need to only return the allNotes map data if allNotes isn't empty (its an array). This seems like just a simple if/else but really can't figure out how to do this in this context (inside view). Right now, I get the error in the title when nothing is in the array. when it has data everything is fine.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes.map((item) => {
return (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
})}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}
Again I Know this is something really simple but I can't get the formatting correct. Don't know what the correct method of doing this would be. Thanks!

Could always double check that allNotes is defined like this although it may be better to default allNotes to an empty array and then confirm here that it's what you'd expect.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes && allNotes.map(item => (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
)}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}

How to create a backdrop component under a Flatlist?

I'm trying to invoke an action/event if a user pressed under a <FlatList /> component. Here's what I have so far:
. . .
return (
<View style={{ flex: 1 }}>
<FlatList
data={data}
renderItem={renderItem}
/>
<View style={{ flex: 300, width: Dimensions.get('screen').width, height: Dimensions.get('screen').height }}>
<TouchableWithoutFeedback
style={{
borderWidth: 1,
borderColor: 'white',
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}}
onPress={() => console.log('clicked')}
>
<Text>Backdrop button</Text>
</TouchableWithoutFeedback>
</View>
</View>
);
. . .
And this renders the follow:
It just seems too hacky for me, how can I get this to work better? I don't want to keep adding onto the flex value (in the code snippet, it is flex: 300) and I feel like I don't need Dimensions.

I got it to work like this:
. . .
return (
<View style={{ flex: 1 }}>
<View style={{ justifyContent: 'space-around' }}>
<View style={{ alignSelf: 'stretch' }}>
<FlatList
data={data}
renderItem={renderItem}
/>
</View>
</View>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
backgroundColor: 'blue',
}}
>
<TouchableWithoutFeedback
style={{
borderWidth: 1,
borderColor: 'white',
alignSelf: 'stretch',
width: Dimensions.get('screen').width,
height: '100%',
}}
onPress={() => console.log('clicked!')}
>
<Text style={{ color: 'white', fontWeight: 'bold' }}>Click me</Text>
</TouchableWithoutFeedback>
</View>
</View>
)
. . .
Neither sure if it's the best approach or if it will bring me problems in the future, but it seems to work for now. Looks like this:

KeyboardAvoidingView overlapping header

I have a problem with KeyboardAvoidingView where my container seems to be overlapping my header when I clicked the text input like this
and I'm using header from react native elements
here is my code
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<Header
left={<IconWrapper
image={<Image source={img.icons.menu} style={{ width: normalize(26), resizeMode: 'contain', paddingHorizontal: normalize(5), marginHorizontal: normalize(5) }} />}
onPress={() => Actions.drawerOpen()} />}
title={'Activity Log'}
right={<View style={{ width: normalize(30) }} />}
/>
<View style={styles.innerContainer}>
<Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
<View style={{marginVertical: 10}}>
{columns}
</View>
<TextInput
placeholder={"Additional Notes"}
/>
</View>
</KeyboardAvoidingView>
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center'
},
innerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
})

Javascript - React native - how to put in a TextInput and Text in the same row

I'm working on React native and Expo XDE on my Android and I want that these Texts - "username" and the "password" will be to the right to their TextInputs (because I write in Hebrew language), so it will be in two rows and not on the screenshot below.
This is the code:
<View style={styles.container}>
<Text > Travel </Text>
{/* <View style={styles.row}>
<View style={styles.inputWrap}> */}
<Text> Username </Text>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ username: text })}
value={this.state.username}
/>
<Text> Password </Text>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ password: text })}
value={this.state.password}
secureTextEntry={true}
/>
This is how its look now: the main screen with login or register
I'd tried these styles codes but it didn't work, it made a huge mess up on the android and everything just flew:
input: {
height: 40,
width: 180,
borderColor: "gray",
borderWidth: 1
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
row: {
flex: 1,
flexDirection: "row"
}
I also want to design the headline "Travel" on the top but I
haven't succeed at all after so many times, it stayed the same.
Can you please help me with those issues ? if more details are needed please tell me.
Thanks in advance.

You should wrap your Text and TextInput into another View which flex direction is row and vertically centered. This code works for me.
<View style={{flexDirection: 'column', flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Travel</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Username</Text>
<TextInput style={{width: 200}}/>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Password</Text>
<TextInput style={{width: 200}}/>
</View>
</View>