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?
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.
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 trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
I'm using react-native-blur to blur a view on react-native but it does not work inside a modal as this issue states.
I've tried the idea suggested in the comment by setting a timeout after the imageLoad but it still not blured.
Is there any workaround ? Why does it works outside a modal but not in the modal ? What is the difference between how a modal render in react-native ? That's unfortunately a bug part of my app and I must succeed.
Thanks
EDIT:
I did it differently. As blurRadius is working for images on android in modals, I use a combinations of images to show exactly what I want of the image.
Perhaps useful for other people, I tried the react-native-blur solution but got stuck as well. Eventually this worked just fine for me:
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({ modalVisible: false });
}}
>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
backgroundColor: 'rgba(100,100,100, 0.5)',
padding: 20,
}}
>
{this.props.modalContent}
</View>
</Modal>
The remaining part of the code can be found in the documentation of the react native modal: https://facebook.github.io/react-native/docs/modal
I have this in my React Native code, I am trying to parse through some API data.
{this.state.articles.map(article => (
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
and every time I run it I get a error that says:
Adjacent JSX elements must be wrapped in an enclosing tag
I have no idea what to do, can anyone help me out? Thanks!
The result of the .map call can only return one element at a time. Because the JSX-compiler sees two adjacent elements (Image and Text), it throws the mentioned error.
The solution would be to wrap the two components in a view
{this.state.articles.map(article => (
<View style={{ some extra style might be needed here}}>
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
</View>
)}