In my React Native application I add a borderRadius to my View component. Sometimes, there is a yellow background, even if I set backgroundColor:'transparent' to the view.
It disappears if I start scrolling. Is this issue known and is there a solution how I could fix that behavior?
This is how I render of my message components:
<View
style={styles.ownView}>
<Text style={[styles.text,styles.ownText]}>{this.props.doc.text}</Text>
<Image source={require('../../images/chat_own.png')}
style={{right:0,bottom:5,position:'absolute'}}/>
</View>
var styles = StyleSheet.create({
ownView: {
backgroundColor:'transparent',
flexDirection:'column',
alignItems:'flex-end',
marginBottom:15
},
text: {
color: 'white',
fontWeight: "200",
backgroundColor: "#817CD0",
borderRadius: 12,
padding: 10,
right: 0,
paddingRight: 60
},
ownText: {
marginRight: 10
}
});
The image is for the bubble part for the right or left side.
Related
This is for the web development btw, not for Ios or Android
So this is my view
<View style={styles.fullView}>
<Video shouldPlay isLooping resizeMode="cover" source={require("./res/bg.mp4")} style={{flex: 1}}/>
</View>
And This is my Stylesheet
fullView: {
flex: 1,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
heading: {
color: 'white',
marginBottom: 100,
fontSize: 35,
},
input: {
padding: 6,
fontSize: 16,
width: 200,
textAlign: 'center',
color: 'white',
},
bgcolor: {
backgroundColor: '#33373861',
borderRadius: 15,
margin: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#FBC1F0',
margin: 30,
borderRadius: 15,
padding: 10,
height: 45,
width: 200,
},
image: {
flex: 1,
}
What I am getting is this
What I need is the whole video on screen
I have tried to use resizeMode with cover,contain,stretch,repeat none of them work
Its Like the resizeMode is not recognized itself.
But when I change the height and width in stylesheet the video frame resizes But the video doesn't
Video Resolution is 3840 x 2160.
I want it to resize the video to screen size or adjust accordingly
thanks in advance.
I discovered this happens for web only because the Video html element is absolutely position for some reason.
If you add the following line to your onReadyForDisplay function it will fix it:
import { Video } from 'expo-av';
<Video
style={styles.video}
source={{
uri: 'http://path/to/file',
}}
useNativeControls={true}
resizeMode="contain"
onReadyForDisplay={videoData => {
videoData.path[0].style.position = "initial"
}}
/>
I'm quite new to react native, I'm trying to understand how I can style two components to intercept with each other. Desirably have one component move behind the other component as if they were layers in Photoshop. I'd like to achieve this so that I can animate the styling of the hidden component to reveal it self on press of a touchable opacity. But i'm fine with the animation, I don't need any help there. I only need direction with how to correctly style a component to hide behind another component.
Here are the two components I'm working with, a text component contained inside a touchable opacity (the text box), and a date of publish text component. Both of which are contained inside a main view component.
<View style={styles.contentContainer}>
<View style={styles.dateContainer}>
<Text style={styles.dateText}>a few seconds ago</Text>
</View>
<TouchableOpacity onPress={() => {}}>
<Text style={styles.item}>this is some text input</Text>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
},
item: {
padding: 16,
fontWeight: 'bold',
borderColor: '#bbb',
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 10,
},
dateContainer: {
flex: 1,
paddingHorizontal: 2,
marginTop: 16,
alignSelf: 'flex-end',
},
dateText: {
color: '#adadad',
},
});
You can use the position:'absolute' and the zIndex in styles to have the layers for views.
The below style would place the dateContainer above the text component and in the corner of the text compoment. You can position the view using left,right,top or bottom.
dateContainer: {
position: 'absolute',
flex: 1,
paddingHorizontal: 2,
top: 30,
alignSelf: 'flex-end',
zIndex: 1000,
},
I'm trying to wrap my head around flexbox, and also how the component tree works with a react-native-maps MapView (and whether that's different from other components with components "on top of them" for which I'm currently using Callout.
For example, here's my MapView's render method. The TouchableOpacity area (and its buttonCallout container. is currently just for my experiments in understanding layout. I'm using the F8StyleSheet wrapper from makeitopen.com
render() {
return (
<View style={styles.container}>
<MapView
style={{ flex: 1 }}
region={this.state.region}
showsUserLocation={true}
>
{this.renderMarkers()}
</MapView>
<Callout style={styles.searchCallout}>
<TextInput
onChangeText={searchText => this.setState({ searchText })}
onSubmitEditing={this.handleSearch.bind(this)}
style={styles.calloutSearch}
placeholder={"Search"}
value={this.state.searchText}
/>
</Callout>
<Callout style={styles.buttonCallout}>
<TouchableOpacity
style={[styles.touchable]}
onPress={() => console.log("press")}
>
<Text style={styles.touchableText}>Press Me 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.touchable]}
onPress={() => console.log("press")}
>
<Text style={styles.touchableText}>Press Me 2</Text>
</TouchableOpacity>
</Callout>
</View>
);
}
}
const styles = F8StyleSheet.create({
container: {
flex: 1
},
buttonCallout: {
flex: 1,
alignSelf: "flex-end",
justifyContent: "space-between",
backgroundColor: "transparent",
borderWidth: 0.5,
ios: { padding: 5 },
borderRadius: 20
},
touchable: {
backgroundColor: "lightblue",
padding: 10,
margin: 10
},
touchableText: {
fontSize: 24
},
searchCallout: {
flexDirection: "row",
backgroundColor: "rgba(255, 255, 255, 0.9)",
borderRadius: 10,
width: "80%",
marginLeft: "5%",
marginTop: 40
},
calloutSearch: {
borderColor: "transparent",
marginLeft: 10,
width: "90%",
marginRight: 10,
height: 40,
borderWidth: 0.0
}
});
It makes sense how I use margins to get the searchCallout to be where I want it to be because it's at the top.
As the code is now, the buttonCallout (with the TouchableOpacity inside) renders in the top right corner (sensible - alignSelf: 'flex-end' puts it at the "end", on the right).
...
Mid-post update! By changing the styles.container's flexDirection to row, with the buttons callout at alignSelf: flex-end. I've got the button callout on the bottom, and the search callout is still on top. I guess Callout components all render on top of each other.
So now I can use justifyContent on styles.container to have both callouts either in the center or on the left or right (center, flex-start, flex-end). How do I justify the different items separately? (justifySelf is not a thing!)
Wrapping both callouts in a unstyled View component results in the button callout rendering at the top-right but the search callout being nowhere to be found.
Wrapping them both in a callout results in the buttons rendering a little right of the top left corner, with the search callout again not displayed.
Help me understand all this! Thanks :)
if you're trying to position the buttonCallout at the bottom, give it a postion:'absolute', so it will stay at the bottom
buttonCallout: {
flex: 1,
flexDirection:'row',
position:'absolute',
bottom:10,
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: "transparent",
borderWidth: 0.5,
borderRadius: 20
},
I have the following flex layout defined for use with a React Native app (please excuse the ugly background color):
const master = StyleSheet.create({
component: {
flex: 1,
backgroundColor: "#ff69b4",
},
topSection: {
//flex: 1,
},
bottomSection: {
//flex: 2,
justifyContent: "flex-end",
backgroundColor: "white",
height: 50,
}
});
I need the bottom section to be an absolute height (say, 50px), and the top section to fill all other space so that I can put some menu icons there.
Can anyone help?
Does this fit your request?
component: {
flex: 1,
backgroundColor: '#ff69b4'
},
bottomSection: {
justifyContent: 'flex-end',
backgroundColor: 'white',
height: 50,
},
topSection: {
flex: 1
}
Supposing component is the container, like
<View style={styles.component}>
<View style={styles.topSection} />
<View style={styles.bottomSection} />
</View>
or take a look at this snack
I'd like to use a background image in my react native app,
the image is smaller than the screen, so I have to stretch it.
but it doesn't work if the image is loaded from asset bundle
var styles = StyleSheet.create({
bgImage: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
resizeMode: 'stretch',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
<Image source={require('image!background')} style={styles.bgImage}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</Image>
it looks like this:
however, it works fine for a remote image, through source={{uri: 'background-image-uri'}}:
From Github issue: Image {require} is broken in React Native for Resizing, you could try <Image style={{width: null, height: null}}, hope that facebook would fix it soon.
The Image tag should generally not be treated as a container view.
Having an absolutely positioned wrapper containing your (stretched/contained) image appears to work well:
var styles = StyleSheet.create({
bgImageWrapper: {
position: 'absolute',
top: 0, bottom: 0, left: 0, right: 0
},
bgImage: {
flex: 1,
resizeMode: "stretch"
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});
<View style={{ flex: 1 }}>
<View style={styles.bgImageWrapper}>
<Image source={require('image!background')} style={styles.bgImage} />
</View>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
You could always use the Dimensions module to get the width of the screen and set your image's width style to that value:
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
It also seems strange that a remote image works fine...you can try loading up a local static image with the uri syntax by using source={{uri: 'local_image_file_name' isStatic: true}}.
for me use undefined instead of null value. on typescript environment, it will be prompted not assignable
bgImage: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'stretch',
},