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
Related
I have a problem when I press the btn of the remote control on the right side to go to the details of the movies, this button is not marked, but when I remove the text it does go directly to the play button.
Sorry for my basic english!!
With Text IMAGEN
without Text IMAGEN
This is my code
<View style={style.container}>
{dataFake.map((item, index) => {
return <View style={{ marginTop: 20, marginLeft: 20, width: 120, position: 'relative' }} key={index}>
<View onPress={() => console.log(1)}>
<Text>
Some text
</Text>
</View>
<View pointerEvents="none">
<ImageBackground source={{ uri: item.image }}
resizeMode={'contain'} style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
overflow: 'hidden',
}}>
<View style={{ width: '100%', backgroundColor: 'black', height: 180, opacity: 0.5 }}></View>
</ImageBackground>
</View>
<TouchableHighlight onPress={() => console.log(item.id)} underlayColor={'#00B9AE'} style={{ width: '100%', color: 'white', marginTop: 10 }} >
<View style={style.btnView}>
<Text style={style.playBtn}>Play</Text>
</View>
</TouchableHighlight>
</View>
})}
</View >
When I press the TouchableOpacity, it highlights, but a little over half of the time, it doesn't log press.
Why is the touchable area so small? It feels like it is only 1 x 1 pixel.
I already tried quite a few things, such as using a <View> wrapper and setting the width and height of the TouchableOpacity component.
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}
/>
TouchableOpacity has the size of the content in this example which means if the icon is very small then your touchable area will be very small. I usually set a square sized container style for icons and increase the size when necessary
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
height: 20,
width: 20
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}/>
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.
is there a way to put the text "cancel" and "ok" below the avatar button? I mean that the avatar and the text need to be pressable when click.
I can't put the text below to every button and I don't understand what is my mistake.
this is what I get now
but I need the text below to every button and also must be also pressable same the image (it should be part of the button)
this is my example of code :
const OrderInformationScreen = props => {
return (
<View
style={{
backgroundColor: '#00BFFF',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}
>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
<Avatar
size='large'
activeOpacity={0.2}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text style={{ fontSize: 30 }}>ok</Text>
</View>
</View>
);
};
I think the best option is wrapping the avatar and the text by TouchableOpacity.
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
</TouchableOpacity>
I recommend to write your own styles by using basic react native elements. Try to use least number of 3rd party plugins. Good luck.
It is like that because of the styles you have given to view. You have given a flex direction row which will place all your elements in a row. You have given four elements in your root view which has style flex-direction row so all four elements in that view (2 Avatar component and 2 text) will be placed side by side in a row.
if you want text below image i thin you should put avatar and text box in a view and give that a view a flex-direction column like:
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<TouchableOpacity onPress={() => console.log("cancel!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<View>
hope this helps in someway :)
The best option is Wrapping the avatar and text with TouchableOpacity. and Add some more Styles like below
<TouchableOpacity style={{
backgroundColor: '#00BFFF',
display : "flex",
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
}} onPress={() => {}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel || ok</Text>
</View>
</TouchableOpacity>
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>