I am using <KeyboardAvoidingView/> to try to create a messaging interface in React Native wherein upon entering the text field, the field raises up so the user can see what they're typing. I have the following syntax...
<Gradient
colorOne={COLORS.gradientColor1}
colorTwo={COLORS.gradientColor2}
style={{width: maxWidth * 1.00, height: '100%'}}
>
<KeyboardAvoidingView
behavior="padding"
enabled
style={{flexGrow:1}}
>
{renderHeader()}
{MainRender()}
</KeyboardAvoidingView>
</Gradient>
However, in execution, the following occurs...
You can try install react-native-keyboard-aware-scroll-view package and use it in your code like this:
<KeyboardAwareScrollView
enableAutomaticScroll={false}
bounces={false}
enableOnAndroid
keyboardShouldPersistTaps='handled'>
{content}
</KeyboardAwareScrollView>
Hope this will help you.
Related
A part of my react native application currently looks like this:
Where the graph and picture are next to each other. My current code is:
<View style={{flexDirection:"row", backgroundColor:'#FFFFFF', borderRadius:10}}>
<View style={{flex:1, padding:10}}>
<Card.Cover source={{uri: props.url}}/>
</View>
<View style={{flex:1, padding:10}}>
<BarChartExample></BarChartExample>
</View>
</View>
I was wondering if anyone could help me fix what is wrong in my code to get my image looking like the example image.
You can try setting the resizeMode props on the component to contain.
More information here: https://reactnative.dev/docs/image#resizemode
I have a use case, where after a file upload I want to open lightbox wrapped inside <TouchableOpacity>
here is my code.
<TouchableOpacity style={{marginRight: ms(10), borderRadius: ms(10), overflow: 'hidden'}}>
<Lightbox>
<FastImage
style={{width: ms(75), height: ms(75), borderRadius: ms(10)}}
source={{uri: this.props.image.path}}
/>
</Lightbox>
</TouchableOpacity>
Lightbox does not have any event to trigger open programatically, here is the lighbox I am using https://github.com/oblador/react-native-lightbox
My only option seem to trigger TouchableOpacity.onPress programatically after file upload is done, tried using ref the following way.
TouchableOpacity ref={component => this.touchable = component} with this.touchable.props.onPress(); this gives me an error saying undefined is not an object, when I did console.log(this.touchable) I noticed it is not empty, however when I did console.log(this.touchable.props) it says undefined, perhaps syntax is changed which does not seem to be documented.
Is there any way to trigger onPress programatically?
Thanks.
Maybe try :
ref={(touchable) => this._touchable = touchable}
this._touchable.touchableHandlePress() //this?
Hey so I'm very inexperienced with coding and react-native in general, but I'm trying to create a modal which pops up with a little info box for the user and blurs out the background page. I was able to get a modal working and tweaked it for my specifications until it works great! I imported the library 'expo-blur' and found an example online of it being used, but I can't figure out how I would implement the blur into my Modal. Please any help with this would be extremely appreciated! I've attached images of my Modal code and the expo-blur example I found, below.
Modal
BlurView example
I had the same problem and I have just found this example. Now it works.
https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152
In the example he is using class components, I'm using function components. The problem was I wasn't using transparent={true} for the modal
This is my code to make it work:
<Modal visible={filterScreen} animationType="slide" transparent={true}>
<View style={{ marginTop: 100, flex: 1 }}>
<BlurView
intensity={100}
style={[styles.nonBlurredContent, { height: "100%" }]}
>
<Text>Hello! I am bluring contents underneath</Text>
<Text>Hello from the modal</Text>
<TouchableOpacity
style={{ backgroundColor: "red", width: 30, height: 30 }}
onPress={() => setFilterScreen(!filterScreen)}
>
<Text>X</Text>
</TouchableOpacity>
</BlurView>
</View>
</Modal>
I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?
How to keep keyboard opened when i have TextInput and Touchable near input that sends message. So i want to send message without double tap on touchable. First to hide keyboard, second to send message. How to do that?
Use keyboardShouldPersistTaps to handle this.
Example:-
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={'always'} >
</ScrollView>
Deprecated Properties:-
false, deprecated, use 'never' instead
true, deprecated, use 'always' instead
source
Check out keyboardShouldPersistTaps.
The following keeps the keyboard open when content is tapped but closes the keyboard when dragged.
<ScrollView keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">
{/* Content containing interactive elements such as <Touchable /> */}
</ScrollView>
Note
Any parent ScrollViews/VirtualizedLists/Flatlists/SectionLists will also need to set keyboardShouldPersistTaps="always"
Here are some gory details if you're interested.
Have a look at the keyboardShouldPersistTaps property of ScrollView. Setting it to "handled" should do what you are looking for.
just only wrap you submit button with scrollview and then make sure u need to add two props keyboardShouldPersistTaps="always" and keyboardDismissMode="on-drag"
like this ...
<TextInput/>
<ScrollView
contentContainerStyle={{
width: SIZES.width / 6,
height: 60,
}}
keyboardShouldPersistTaps="always"
keyboardDismissMode="on-drag">
<TouchableOpacity onPress={}>
</TouchableOpacity>
</ScrollView>