I am developing a Facebook type application where i have a problem in my comments.js. In this file i have ScrollView and View wrape in a KeyboardAwareScrollView.When i click a button it's focus on TextInput correctly.The problem is only the keyboard is open and the child component inside the KeyboardAwareScrollView is not scrolled to the last TextInputs where they can focused.
What i do i can wrape the ScrollView and View into into one View but did't any help.Then i apply multiple way's i think there is issue in my code.
This question is ask multiple time i read these
1.React-Native button press after textInput in Keyboard aware scroll view
2.React Native KeyboardAwareScrollView doesn't work
3.Automatically scroll the view up when keyboard is shown in react-native
4.How to make your React Native app respond gracefully when the keyboard pops up
but didn't meet my condition.
Here is my code
<KeyboardAwareScrollView style={{flex:1}}
resetScrollToCoords={{ x:0, y: 0 }}>
<ScrollView contentContainerStyle={styles.scrollViewStyle}
keyboardShouldPersistTaps='always'>
<Image/>
<List/>
</ScrollView>
<View style={{ flexDirection: 'row', height: 50 }} >
<Image
style={{ height: 40, width: 40, marginLeft: 20 }}
source={require('../../assets/plus.png')}
/>
<View style={{ flex: 1, marginLeft: 20 }}>
<TextInput
autoGrow='true'
ref='myInput'
underlineColorAndroid='transparent'
placeholder='Type here to translate!'
onChangeText={text => this.setState({ text })}
>
{this.state.text}
</TextInput>
</View>
<TouchableOpacity
onPress={() => {
this.CommentsApi()
}}>
<Image/>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
Related
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 Card component that displays a listing on the app's dashboard page. The whole card is wrapped in a TouchableOpacity. I want the entire card to be Pressable, which links to the listings page.
However, I want the bottom right corner of it to not be pressable, since it contains a View that has 2 icons on it (a Like button and a Message button). Each of these icons has their own onPress() that needs to happen.
Right now, if you try to click on the bottom right icons, it just triggers the whole TouchableOpacity
Here is the return statement for Card:
return (
<Container>
<Cover style={{ backgroundColor: "red" }}>
<Image
source={{
width: 80,
height: 90,
url: "https://picsum.photos/200/300",
}}
/>
</Cover>
<Content>
<Title>{props.name}</Title>
<PriceCaption>{"$" + props.price}</PriceCaption>
<View
style={{
position: "absolute",
height: 35,
width: 100,
top: 45,
right: 0,
flexDirection: "row",
alignItems: "Flex-end",
}}
>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
left: 70,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="mail" size={26} color={colours.purple} />
</TouchableOpacity>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
marginLeft: 0,
left: 10,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="heart" size={26} color={colours.purple} />
</TouchableOpacity>
</View>
</Content>
</Container>);
Is there a property, or way I can exclude a nested View from a TouchableOpacity?
Note: If you click on the Icons, they still trigger their respective onPress(), however, the entire Card still fades out, and the animation is the same as if you clicked elsewhere on the card (so user gets poor feedback on where they clicked).
I have an understanding problem in your question, but I believe that wrapping with TouchableWithoutFeedback might be a solution or pointerEvents={"none"} property. If you do a little research on the keyword TouchableWithoutFeedback component from react-native, I think you will get the result you want
I frequently place some TouchableOpacity in other TouchableOpacities. When you press on inner TO, the inner will be pressed not the parent. So you shouldn't think about making some area of parent unpressable.
I just test my sample code to be sure. As I said earlier, it should work. I have no idea what causes this problem in your case.
I'm using react-native-paper, I would like to make a button with bigger dimensions than normal, as seen in the gif.
I've tried using both height and padding, but both don't work properly.
What you see in the gif is the example with padding.
only way to click is in the center, in other places the event does not happen.
Can you give me a hand?
<Button
mode="contained"
labelStyle={{ color: Colors.white }}
style={{ padding: 30 }}
onPress={() => console.log('Pressed')}>
Start
</Button>
YOU CAN USE
contentStyle
EXAMPLE
<Button
onPress={() => {}}
style={styles.completeFormButton}
styleText={styles.completeFormButtonText}
contentStyle={{ // <--- HERE-----
paddingVertical: 10,
}}
preset="outlined"
/>
react-native-papper has these three props to pass styles
contentStyle
Type: StyleProp
Style of button's inner content. Use this prop to apply custom height and width and to set the icon on the right with flexDirection: 'row-reverse'.
style
Type: StyleProp
labelStyle
Type: StyleProp
Style for the button text.
View documentation react native paper
you can create a touchablehighlight view around the button and call the same onPress function. something like this:
<TouchableHighlight onPress={() => console.log('Pressed')}>
<View
style={{
height: 70,
width: 110,
borderRadius: 5,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center',
}}>
<Button
mode="contained"
labelStyle={{ color: 'blue' }}
onPress={() => console.log('Pressed')}>
Start
</Button>
</View>
</TouchableHighlight>
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.
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