I am trying to style two elements that need to appear on the same line in my react native app. What I have thus far positions them on the same line - using nested <Text> elements - but I'm unclear how to then be able to create some distance between them. For instance, in the example below, I want the icon to be left-aligned, which it is now, but I want the this.props.client.name text to be center-aligned. From my understanding margin is ignored in children elements. How can I accomplish this?
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
You can try styling them using "flex" css properties.
for example if you have:
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
TRY
<View>
<Text>
<View style={{ display: "flex", alignItems: "center",
position: "relative", zIndex: 1 }}>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
style={{position: "absolute", zIndex: 2, left: 0 }}
/>
<Text>{this.props.client.name}</Text>
</View>
</Text>
</ View>
You should now have your Icon on the left and your text centered.
Read more about Flexbox here. reactnative.dev/docs/flexbox
Related
<View style={styles.bottomContainer} >
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} onPress = {loginHandler} >
<Text style={styles.buttontext} >LOG IN</Text>
</Pressable>
</Animated.View>
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} >
<Text style={styles.buttontext} onPress = {registerHandler} >REGISTER</Text>
</Pressable>
</Animated.View>
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
</View>
Here is the Styling of above views:
bottomContainer: {
justifyContent: 'center',
height: height / 3,
},
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
...StyleSheet.absoluteFill,
justifyContent : "center",
},
DETAILS OF THE CODE
so basically I am trying to create an aninated view where the "forminput" container should pop up when user taps on log in or register button. But the problem is that my buttons dont work when because the forminput container lands on top of them somehow (eventho it is invisible). The person I am following used
zIndex: -1
to place it underneath the view but it does not work in android.
PS: I have also tried "elevation" Prop but that doest seem to work either.
as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>
I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.
You guys can see the issue:
Code for the Dropdown is:
<View style={[styles.container]}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Image style={styles.image}
source={require('../../assets/icons/dropdown.png')}
/>
</TouchableOpacity>
<View >
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:1, elevation:1}]}>
<ScrollView style={{height:60}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{}}
disabled={false}
key={i}
onPress={()=>this.selectItem(i)}>
<Text style={styles.item_text}>{item} </Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
I have applied absolute positioning on the animated view which displays the dropdown items.
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%', height: 70
}
I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
try to use touchable opacity from gesture handler not react native
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.
I'm building a 'Search' component, in which a ScrollView is displayed when the search terms in the TextInput return related tags from the API endpoint. While running in iOS the component works as expected and allows me to scroll through the list and select an option. However, android does not seem to allow scroll or touch events on the ScrollView component. I've decorated the component with the keyboardShouldPersistTaps="always" and nestedScrollEnabled={true}.
Attempted placing the ScrollView at different levels of the overall screen. When close to the top level View, the ScrollView works as intended, but at a certain depth, it ceases to work. Having the ScrollView higher up in the component would require a lot of calculation based on the onLayout events of each nested View in order for the component to match designs, so I'd like to avoid it if possible.
<ScrollView
style={Style.view}
contentContainerStyle={Style.container}
keyboardShouldPersistTaps="handled"
>
<TouchableOpacity
onPress={this.onClose}
style={Style.close}
hitSlop={{
top: 16,
right: 16,
bottom: 16,
left: 16,
}}
>
<Icon
name="times"
size={24}
color={Palette.$color_white}
/>
</TouchableOpacity>
<Animated.View style={[Style.animatedWrapper, { transform: [{ translateY }] }]}>
<View style={Style.tags}>
{
tags.map(tag => (
<View key={tag.guid} style={Style.tag}>
<Strong color={Palette.$color_white}>{tag.name}</Strong>
<TouchableOpacity
style={Style.tagButton}
onPress={() => this.onTagPress(tag)}
hitSlop={{
top: 16,
right: 16,
bottom: 16,
left: 16,
}}
>
<Icon name="times" size={14} color={Palette.$color_white} />
</TouchableOpacity>
</View>
))
}
</View>
<View style={Style.searchWrapper} onLayout={this.onLayout}>
<Image
source={Buzz}
style={Style.illustration}
/>
<View style={Style.inputWrapper}>
<Heading
level={3}
color={Palette.$color_white}
>
Search by key words
</Heading>
<View style={Style.controlWrapper}>
<View style={{ flex: 1 }}>
<TextInput
ref={(ref) => { this.input = ref; }}
returnKeyType="done"
textContentTypez="none"
placeholder="Type your search"
onChangeText={this.onChangeText}
onFocus={this.onFocus}
onBlur={this.onBlur}
underlineColorAndroid="transparent"
placeholderTextColor={Palette.$color_white}
style={Style.searchInput}
/>
<Animated.View
style={[Style.menu, { opacity: menuOpacity }]}
pointerEvents={isMenuOpen ? 'auto' : 'none'}
>
<ScrollView
contentContainerStyle={Style.menuOptionsContentContainer}
keyboardShouldPersistTaps="always"
style={[Style.menuOptions, { maxHeight: scrollHeight }]}
nestedScrollEnabled
>
{
!isLoading
? results.map(tag => (
<TouchableHighlight
style={Style.menuOption}
key={tag.guid}
onPress={() => this.onOptionSelect(tag)}
underlayColor={Palette.$color_light_grey}
>
<Text style={Style.menuOptionText}>{tag.name}</Text>
</TouchableHighlight>
))
: (
<View style={Style.activityIndicator}>
<ActivityIndicator size="small" color={Palette.$color_orange} />
</View>
)
}
</ScrollView>
</Animated.View>
</View>
<StyledTextButton
title="Search"
onPress={this.onSearchPress}
disabled={tags.length <= 0}
/>
</View>
</View>
</View>
</Animated.View>
</ScrollView>
The ScrollView is rendered as expected, but in android it cannot respond to touch and swipe gestures. Works as intended in iOS.
Here's an example in iOS of the Component.