Develop Reference

keyboard is hiding the textinput . React Native (Expo CLI)

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>
)
}

How can I position two buttons on top of the background side by side and at the bottom of the screen in React Native?

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.

Can't position React Native View at the bottom

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

Navigate to another stack navigator screen from a view not in the navigator

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>
);
}

React Native trigger press event except child component

My use-case is trigger something when click parent component (TouchableOpacity for example), but trigger nothing when click children component (Screen and others for Example). My case is same like prevent bubbling on web. From docs I've read said that it should use onStartShouldSetResponderCapture, but I still don't understand for the usage. Below is the snippet.
<TouchableOpacity style={styles.container} onPress={() => alert('tes')}
>
<Screen style={styles.screenContainer} onStartShouldSetResponderCapture={() => false}>
<Title>Edit Nama Restoran</Title>
<Divider styleName='line' />
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
<View styleName='horizontal' style={styles.nameContainer}>
<Button styleName='confirmation dark' onPress={this.handleSubmit}>
<Text>UPDATE</Text>
</Button>
<Button styleName='confirmation' onPress={onClose}>
<Text>CLOSE</Text>
</Button>
</View>
</Screen>
</TouchableOpacity>
EDIT:
Below is an illustration of my case.
If I click overlay (outside of <Screen>), it triggers an alert (expected).
If I click white dialog (<Screen> and children inside), it triggers an alert too (unexpected). What I need is not trigger alert when click <Screen>.

Updated to show how to do with a modal:
<Modal
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
</Modal>
Not sure if this is the right snippet from your code, but basically the part you want to pop up, pull it out from the touchable opacity and wrap a modal around it. Then on click have it visible/invisible.