I'm trying to use react-native-picker-select package. and #react-native-picker/picker is a dependency according to their docs. but..
After adding this package to my RN app, it builds without error but the app crashes.
Looked for issues on their repo, but i dont think there are resources for the fix. Already created an issue also on their repo.
Add a <Text></Text> component after the <Picker></Picker> component, inside the parent <View></View> component of the <Picker></Picker> component, just like in the code snippet below:
<View style={{flex: 1, borderWidth: 1, borderColor: '#0f0'}}>
<Picker
style={{...styles.itemPicker, color: theme.TEXT}}
mode="dropdown"
selectedValue={unit_elevation}
onValueChange={(value) => this.changeUserPreferences('unit_elevation', value)}
>
<Picker.Item label={messages.meters} value="M" />
<Picker.Item label={messages.feet} value="FT" />
</Picker>
<Text style={{width: '100%', height: 60, position: 'absolute', bottom: 0, left: 0}}>{' '}</Text>
</View>
For me, the issue was caused because I was passing a label integer value in Picker.Item component.
By passing a string value, the issue was fixed.
After hours of figuring out, instead of using #react-native-picker/picker... use #react-native-community/picker instead even tho they said it's already deprecated.
I've finally successfully run my app while using react-native-picker-select and #react-native-community/picker.
From my testing it seems like if you're running on Expo 34 or previous, you are not required to provide the extra dependency in most cases, but the #react-native-community/picker package works as well.
If you have upgraded to Expo SDK 35 or beyond however, the additional dependency is required and only #react-native-picker/picker will work correctly and not crash.
Related
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.
I have a screen with header and content, and in the content section I have a search and I want when I open the keyboard to raise all the view. I tried keyboardAvoidingView but it's not working for me. What I am doing wrong here ?
return (
<View style={styles.content}>
<View style={styles.header}>
...
</View>
<KeyboardAvoidingView
keyboardVerticalOffset={hp(30)}
style={{flex: 1}}
behavior="padding">
...
</KeyboardAvoidingView>
</View>
);
and for the styling:
header: {
height: hp(30),
width: wp(100),
},
container: {
flexGrow: 1,
backgroundColor: Colors.white,
// borderTopLeftRadius: wp(7),
// borderTopRightRadius: wp(7),
},
and here is how it looks
On Android, when you style the root View to flex:1, the application height will automatically reduce by the keyboard height when keyboard is shown.
And for using of KeyboardAvoidingView, this component should be put to an as high as possible level. Formally, you shouldn't place any sized component outside it to prevent some display problems. And to adapt this component, please make sure to check the compatibility both iOS and Android. It has different behavior on the two systems.
You could try setting the behavior to be platform specific like so:
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
// ...
</KeyboardAvoidingView>
It behaves slightly different on iOS and Android and this fixed my issues.
I've also seen react-native-keyboard-aware-scroll-view recommended on many posts regarding the same topic. It might be a more reliable thing to use according to other users but I haven't tried it.
I saw this article:
https://expo.canny.io/feature-requests/p/react-native-fast-image
I install expo react native fast image. So I want to use it but I get this err message:
Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Code:
...
import FastImage from 'react-native-fast-image';
...
{ /* Modal Shipping */ }
<Modal
isVisible={modalView}
swipeDirection="down"
swipeThreshold={20}
propagateSwipe={true}
backdropTransitionOutTiming={0}
>
<View style={{ justifyContent: 'center', padding: 12, alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, padding: 12, borderWidth: 4, borderColor: '#ac67f9'}}>
<FastImage source={{uri: 'https://i.ebayimg.com/thumbs/images/g/QSIAAOSw3gNggE1r/s-l225.webp'}} resizeMode="contain" />
</View>
</Modal>
Is there any new option for this? In expo project, "FastImageView was not found in the UIManager." still occurs.
I've managed to install react-native-fast-image to my expo project. Here is what I've done:
Make sure you run the eas build -p all --profile development Ensure
eas-cli is installed prior to run this script.
After running it, you will have an eas.json file in the root dir of
the project.
The next step is to run expo run:ios or expo run:android, then
you will notice the generated native folders (android, ios) in the
root dir again...
All should work just fine after these steps.
Use this package it is super fast
expo fast image
I have installed react-native-gridview and after that I am getting this error.
The line number shown in error is Media.js:134. It contains the following code.
<GridView data={this.state.dataList} itemsPerRow={2}
renderItem={(item) => {
return (
<View style={{ flex: 1, backgroundColor: '#8F8', borderWidth: 1, margin: 8 }}>
<Image style={styles.imageThumbnail} source={{ uri: item.path}} />
</View>
);
}}/>
I can't understand why I am getting this error. I am not using any ListView
Please Help. Thanks.
The problem is that react-native-gridview is using Listview in their library as you can see here.
And now react-native stopped giving support to Listviews, rather now you
can use FlatList, SectionList and modify them as per your requirement, as they have more features and stability.
That's why you are getting the above error.
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?