I'm currently creating an app using react-native for a capstone project, but have run into a small issue when I try using the snap carousel. It seems that all text does not appear under the carousel for some reason.
const YourApp = () => {
return (
<ScrollView>
<View style={styles.container}>
<View style={{width: '100%', height: 200, backgroundColor: '#c89686',}}>
<Text style={styles.txt}>SPARTAN</Text>
<Text style={styles.txt1}>FITNESS</Text>
</View>
<Text style={styles.txt2}>New Arrivals</Text>
<CarouselCards></CarouselCards>
***<Text style={{}}>Swipe to View</Text>***
</View>
</ScrollView>
);
}
I tried styling, adding margin-top to see if it was for some reason inside of the carousel, but nothing related to styling worked, it instead just added whitespace on the app. Tried adding another container for the text but it did the same thing as the styling, and didn't display.
Related
I have spent hours trying to fix this issue, but can't seem to get around it. I am using react-native-cube-navigation library to incorporate cube navigation into my app. Inside the cube navigation, I have videos that are pulled from a database that play when inserted. I have created a working pause function, but when the videos are places inside of CubeNavigation, the pause function stops working, as well as all buttons on screen. CubeNavigation uses a Animated.ScrollView, so I need to figure out how to allow touchable to work inside of this.
This is the code from the home Screen.
CubeNavigation>
{posts.map(
({url, owner, description, encores, comments, shares}) => (
<View style={[styles.container, { backgroundColor: "#ddd" }]}>
<Videos url={url} owner={owner} description={description} encores={encores} comments={comments} shares={shares}/>
</View>
)
)}
</CubeNavigation>
This is the code from Videos.js
<TouchableWithoutFeedback onPress={() => setPlaying(!playing)} >
<View style={{flex:1}}>
<Video
paused={playing}
style={[styles.backgroundVideo, {width: w, height: h}]}
source={{uri: url}}
repeat
ref={videoRef}
resizeMode="cover"
retainOnceInViewPort={false}
/>
</View>
</TouchableWithoutFeedback>
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 am trying to make a simple single page react native app.
Just to check if my flexbox layouts are working correctly,I decided to give background colors and check if they are aligned.
As seen in the picture the first view occupies the entire space.
Where I am I going wrong ?
My output as shown
Output
Here is my code:
render() {
return (
<View style={styles.container}>
<View style={styles.questionview}>
<Text>Enter a word to get meaning</Text>
<TextInput onChangeText={(text)=> this.setState({word:text})}/>
<Button title={"GET MEANING"} onPress={this.buttonPressed}/>
</View>
<View styles={styles.ansview}>
<Text styles={styles.anstext}>{this.state.answer}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
questionview:{
flex:6,
backgroundColor:'red',
padding:30
},
ansview:{
flex:3,
backgroundColor:'green'
}
});
Took me some time, but found your problem. It's a typo.
It should be just 'style' , not 'styles'.
It should have been as below :
<View style={styles.ansview}>
<Text style={styles.anstext}>{this.state.answer}</Text>
</View>
also styles.anstext is not present in your code.
How to render a paragraph with image at right,
the screen design should be similar to the screenshot
React Native does not support text justification in the way you want. You could somewhat emulate this effect for one paragraph at a time by rendering each paragraph in its own Text component, then rendering the following for paragraphs that have accompanying images:
<View style={{flexDirection: 'row'}}>
<Text>Lorem ipsum dolor......</Text>
<Image source={require('./path/to/image.png')} />
</View>
You'll probably want to add some left padding to the image component so the text doesn't run right up against it.
Can you try:
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return(
<View style={styles.container}>
<Image source={pic} style={{width: 360, height: 110}}/>
<Text>React Application Works fine!</Text>
</View>
);