I am trying to position a React Native view at the bottom of my screen:
<TouchableHighlight onPress={() => this.logout()}>
<View style={{ position: "absolute", bottom: 0 }}>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
And the parent:
<Fragment>
<View>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
And then the layout:
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
{/*<BackgroundProcess />*/}
<Header />
{this.props.children}
</SafeAreaView>
</Fragment>
As far as I can tell, this should get me all the way to the bottom...
However instead, my View centers right in the middle of the screen.
What am I doing wrong here? Is there a better way to position a view at the bottom of the screen? Plenty of tutorials say to use position absolute and bottom 0, but it does not appear to be working in my specific use case
You can do it without position absolute . Add "flex:1" to view before "LogoutSettings" so it will have full height and "LogoutSettings" will be shown at bottom
Try this in parent
<Fragment>
<View style={{flex:1}}>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
Remove position absolute
<TouchableHighlight onPress={() => this.logout()}>
<View >
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
I think you want the style on TouchableHighlight, not View
<TouchableHighlight onPress={() => this.logout()} style={{ position: "absolute", bottom: 0 }}>
<View>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
You don't really need that View at all actually
Related
keyboard hides the some text input , I'm trying to use keyboardAvoidingView. it has no effect here. ?
this is my code
SEE THE CODE BETWEEN *****
IF I wrap scroll view with keyboardavoidingView or I wrap KeyboardAvoidingView with scroll.. it is not changing anything here, I have tried both
//import statments
return (
<View style={style.MainContainer}>
<View style={style.chooseDpContainer}>
<TouchableOpacity onPress={openImagePickerAsync} style={style.chooseDpContainer}>
{(!ImageUrl)?(<><Avatar.Icon size={70} icon="camera-plus-outline" style={{marginEnd:10}} />
<Text>Choose a cool Dp for your Pet</Text></>):
(<><Avatar.Image size={70} source={{uri:ImageUrl}} style={{marginEnd:10}}/>
<Text>Choose another Image?</Text>
<Button mode="text" icon="delete" style={{fontSize:40}} onPress={()=>{
setImageUrl('')
}}>Remove</Button>
</>
)}
</TouchableOpacity>
</View>
<View style={style.divider} ></View>
<Text style={{marginBottom:10}}>Your Pet Details</Text>
{/* KEYBOARD HIDES INPUT, PLEASE REVIEW THIS CODE*/}
{/* *************************************************** */}
<KeyboardAvoidingView style={{width:'100%'}}
behavior={Platform.OS==="ios"?'padding':"height"}>
<ScrollView style={{width:'100%'}}>
{/* // behavior='position'> */}
<View style={style.Input}><TextInput label="Name"/></View>
<View style={style.Input}><TextInput label="Age"/></View>
<View style={style.Input}><TextInput label="Breed"/></View>
<View style={style.Input}><TextInput label="Gender"/></View>
</ScrollView>
</KeyboardAvoidingView>
{/* KEYBOARD HIDES INPUT, THANKS*/}
{/* *************************************************** */}
</View>
)
}
I'm using https://github.com/JoeRoddy/react-native-tag-autocomplete and ran in to the issue where I have it inside TouchableWithoutFeedback component with onPress={Keyboard.dismiss}. The issue is that the tags are no longer touchable when wrapped inside TouchableWithoutFeedback.
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View>
<AutoTags />
</View>
</TouchableWithoutFeedback>
Now I don't know if I should just wrap every other component on my view with TouchableWithoutFeedback and let Autotags be as it doesn't seem as a good solution.
You'll need to split it up so they aren't nested - maybe something like this would help..
<View style={{flex: 1}}>
<View>
<AutoTags />
</View>
<View style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={{width: '100%', height: '100%'}} />
</TouchableWithoutFeedback>
</View>
</View>
I haven't tested it out so the styles might be a bit off, but it should give you an idea on how it can be fixed..
Let me know if it works for you.
I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.
When I give the latter its property of absolute, it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.
Here are screenshots of before and after the inner element position on absolute:
Here's my code including the absolute property:
if (props.stream) {
return (
<>
<TouchableWithoutFeedback onPress={handleScreenPress}>
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={props.stream.toURL()} />
<CountDown time={time} />
{/* {showButtons && */}
<View style={{
// position: 'absolute',
}}>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleEndCall}
>
End Call
</Button>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleSpeakerSwitch}
>
Speaker
</Button>
</View>
{/* } */}
</View>
</TouchableWithoutFeedback>
</>
);
}
return (<> <Loader title="Connecting Your Call.." /> </>)
}
const styles = StyleSheet.create({
videoViewWrapper: {
flex: 1,
overflow: 'hidden'
},
android: {
flex: 1,
position: 'relative',
backgroundColor: 'black'
}
})
export default VideoCall;
I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.
If you want to achieve something like this, then see the code :
Check code :
export default class App extends React.Component {
render() {
return (
<View style={{flex:1}}>
<View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>
<TouchableOpacity
style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
</TouchableOpacity>
<TouchableOpacity
style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
check the link : expo snack
Hope it helps .feel free for doubts
Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.
So I've got a view that contains both a stack navigator and a view at the bottom. The view at the bottom serves as a footer. Currently I'm trying to use a reference to the stack navigator but its not working. How do I trigger a screen navigation in the StackNavigator view from the footer view?
render() {
return (
<View style={styles.container}>
/*This is the Stack Navigator*/
<myNavigator.StackNavigation ref={(c)=>{this._stacky = c}} screenProps={{setNowPlaying:this.setNowPlaying.bind(this),
globalState:this.state,
showFooterPlayer:this.showFooterPlayer.bind(this),
playPauseSong:this.playPauseSong.bind(this),
seekToPosition:this.seekToPosition.bind(this)}}/>
/*This is the footer section*/
<TouchableOpacity onPress={()=>{console.log(this._stacky); this._stacky.navigation.navigate('Player')}} style={[styles.bottomFooterContainer, {height:this.state.showFooterPlayer?60: 0}]}>
<Image style={styles.headerImage} source={{uri:this.state.nowPlaying.image}} resizeMode="cover" />
<View style={styles.playerRight}>
<Text style={styles.songTitle} ellipsizeMode="tail" numberOfLines={1}>{this.state.nowPlaying.title}</Text>
{/* <Text style={styles.songTitle}>{counter}</Text> */}
<View style={styles.controlButtonsContainer}>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/previous.png')} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity onPress={this.playPauseSong}><Image style={styles.controlButton} source={this.state.isPlaying?pauseImage: playImage} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/next.png')} resizeMode="cover" /></TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
);
}
The given task here is to begin app with blinking cursor in the center of screen and keyboard hidden, then after clicking anywhere on the white space keyboard should appear like this:
I tried couple of things, but none of them was workiing, so is there any way to do this?
Here is the part of code I've came up whith already
return (
<ScrollView contentContainerStyle={styles.container}
scrollEnabled={false}>
<View
style={{
position: 'absolute',
right: 0,
left:0,
bottom: this.state.visibleHeight*1.5-this.state.height*0.5
}}>
<TextInput
autoFocus={true}
{...this.props}
multiline={true}
style={[styles.input, {height: Math.max(35, this.state.height)}]}
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,
height: event.nativeEvent.contentSize.height,
});
}}
onChangeText={(text) => {
this.setState({text});
}}>
<Text style={styles.input}>{parts}</Text>
</TextInput>
</View>
<View style={{position: 'absolute',
right: 20,
bottom: this.state.countHeight+10
}}>
<Text style={{color: limiterColor}}>{limiter}</Text>
</View>
</ScrollView>
);
https://rnplay.org/apps/sSKINg
link to the full app