Should get a gradient bluer like the design, but I can't do it, any ideas?
what it should look like
This is how my code look
<ImageBackground
source={{uri: uri}}
style={styles.imageBackground}
imageStyle={styles.imageStyleBackground}
>
<BlurView
style={{width: width * 0.78}}
>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</ImageBackground>
I try to use BlurView component, but it doesn't work the way it's supposed to .
Try with position: 'absolute'
<>
<Image
source={{uri: uri}}
style={styles.imageStyleBackground}
/>
<BlurView style={{width: width * 0.78, position: 'absolute'}}>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</>
You could add an element on top of the image with backdrop-filter:blur(5px) that is masked with a gradient (eg. mask linear-gradient(black, black, transparent))
See https://codepen.io/QuiteQuinn/pen/jOBxGjr.
Related
Is it possible to make StatusBar semi-transparent with an opacity of 0.8?
if I pass backgroundColor={"transparent"} like in the docs it becomes fully transparent without color. Docs https://reactnative.dev/docs/statusbar
<StatusBar style="light" backgroundColor={"red"} translucent />
You can give backgroundColor as #FF000080, and you can change color transparency by changing the last 2 digits of #FF000080
<StatusBar style="light" backgroundColor={"#FF000080"} translucent />
This is how i did it. Under StatusBar added a View with height: insets.top and style for StatusBar. This works for both OS platforms.
return (
<View>
<StatusBar style="light" translucent />
<View style={[styles.statusBar, { height: insets.top }]}></View>
<View
style={[
styles.contentContainer,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]} >
</View>
</View>
);
}
const styles = StyleSheet.create({
statusBar: {
opacity: 0.8,
backgroundColor: "red",
},
});
I'm using ImageBackground from React Native and I'm using a background. I would like to use the size of the background to set the size of the element.
<ImageBackground source={require("../images/Image.png")}>
<Text>Hello World!</Text>
</ImageBackground>
Thanks!
Define height of your ImageBackground
<ImageBackground style={{height: 300}} source={require("../images/Image.png")}>
<Text>Hello World!</Text>
</ImageBackground>
I'm still new in react native. I hope you guys can help me. I want to change float to an int in the slider. (in the onValueChange)
This is my code :
<Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
<Block xsSize='1/2' smSize='1/2'>
<Slider
style={{width: 200, height: 40}}
minimumValue={1}
maximumValue={100}
minimumTrackTintColor="#0197ca"
maximumTrackTintColor="#a2a2a2"
onValueChange={(value) => this.setState({sliderState:value})}
/>
</Block>
<Block xsSize='1/2' smSize='1/2' style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
<Text style={{color:'white'}}>{this.state.sliderState}%</Text>
</Block>
</Section>
I want to change the output in <Text style={{color:'white'}}>{this.state.sliderState}%</Text> become an int. Right now, the output is still float.
When you want the value to be in certain ways make sure to do the changes when you set the state.
In that way, you can have your value to be formatted the way you want.
Try this:
<Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
<Block xsSize='1/2' smSize='1/2'>
<Slider
style={{width: 200, height: 40}}
minimumValue={1}
maximumValue={100}
minimumTrackTintColor="#0197ca"
maximumTrackTintColor="#a2a2a2"
onValueChange={(value) =>this.setState({sliderState:Math.round(value)})}
/>
</Block>
<Block
xsSize='1/2'
smSize='1/2'
style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
<Text style={{color:'white'}}>
{this.state.sliderState}%
</Text>
</Block>
</Section>
I fetch some images from Facebook API and I want to display them responsive, to be 100% width and auto height. The problem seems to be that React Native crops my image.
I tried these solutions:
Solution 1
Solution 2
Also, I have tried to use react-native-auto-height-image and set it's width to the screen's one.
Actual code:
<TouchableOpacity onPress={() => Linking.openURL(post.url)}>
<Card style={{ flex: 1 }}>
<CardItem>
<Left>
<Thumbnail source={ThumbnailImage} />
<Body>
<Text>My text</Text>
<Text note>{createdTime}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Body>
<AutoHeightImage
width={Dimensions.get('window').width - 35}
source={{ uri: post.media.image.src }}
/>
<Text style={{ marginTop: 10 }}>{post.description}</Text>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
PS: Application is using Native Base as a UI library.
This problem can easily solve by using paddingTop, width, and position. Just try below code.
<View style={{width:'100%',paddingTop:'100%'}}>
<Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
</View>
In the above code, change width and paddingTop as per the required image box size.
I think that to solve this problem is simple, you could use Dimensions to set the width and height of the image with the width of the screen, like bellow:
import { Image, Dimensions } from 'react-native';
var screenWidth = Dimensions.get('window').width;
<View>
<Image source={...} style={{ width: screenWidth, height: screenWidth }} />
</View>
https://snack.expo.io/ryuCvY8cX
Here I am trying a simple code but the scroll view is not working if kept inside another view. Code is like this:
return(
<View>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</View>
);
But if scroll view kept as parent view it works perfectly. Code is as below:
return(
<ScrollView>
<Toolbar title={this.props.title}>
</Toolbar>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
);
Now the problem is I don't want my toolbar to scroll up and down, I just want the contents below the toolbar to move. How can I achieve that?
And next question: Is scroll view has to be parent view to be returned to work?
Use the property flexGrow in the style, flex didnt worked for me.
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
you should wrap toolbar in view like this:
<View><Toolbar/></View>
Wrap those component which you want to scroll inside scrollview as:
<ScrollView>your expected components...</ScrollView>
And provide flex to root view as:
<View style={{flex:1}}>
Finally your code will run as you expected.
Top <View> must has style flex:1, and also <ScrollView> has too
This was driving me crazy because I added <view> and <ScrollView> like everyone suggested but nothing worked. Then I closed the terminal then rebuild the application again using:
npx react-native run-android
Then, it started working. I hope this saves someone's sanity :)
FYI, just hitting r (or refreshing) was not working either. I had to rebuild it.
For me, Scroll View wrapped with TouchableWithoutFeedback was causing scroll view to not function at times.
I set height property for style . then it's work for me .
My code :
<View style={styles.listWrapper}>
<ScrollView >
<XYZ/>
</ScrollView>
</View>
Styles :
listWrapper:{
// flex:1,
// flexGrow:1,
width:'80%',
height:300,
},
Dont use contentContainerStyle on Scroll View Just use simple style prop for styling of scroll View . You will not face any problem.
None of these solution worked for me, after very long I found that height of a View inside the code is causing the problem so instead of
height:'50%'
I change it to
height:300
and it worked, as show below:
<ScrollView>
...
<View
style={{
flexDirection: 'row',
height: 100,
justifyContent: 'space-evenly',
height:300,
backgroundColor: '#fff',
padding: 20,
margin: 5,
}}>
...
</ScrollView>
If you are using <Form> from native base and you want to scroll
then use KeyboardAwareScrollView
<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.
</KeyboardAwareScrollView>
this will work on Android
I have solved in this way:
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
<View
style={{
overflow: "hidden",
flex: 1,
borderTopStartRadius: 40,
borderTopEndRadius: 40,
flexGrow: windowHeight,
}}
>
<ScrollView
contentContainerStyle={{
flexGrow: windowHeight,
backgroundColor: Colors.primary_color,
padding: 10,
}}
>
</View>
...
</ScrollView>
Update 2020-02: It will work with React.Fragment <> and </> or <React.Fragment> and </React.Fragment>. So Try this.
return(
<>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</>
);
Use react fragments instead of a View to wrap your scroll view it worked for me
<>
<ScrollView>
..........
</ScrollView>
</>
if you are using position: "absolute", delete it and try.
You can try
<SafeAreaView>
<ScrollView>
</ScrollView>
</SafeAreaView>