Curve of backgroundcolor on React Native - css

I am having trouble on how to make my background color to be curve on top (header part) here is my design
and i am aiming for this curve design on my header part
here is my code
<View style={{backgroundColor: "#BF3EFF", height: "20%", width: "100%",
borderbbottom: "50px"}}>

Here is the one way you can achieve this effect with: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
const screen = Dimensions.get('screen');
export default function App() {
return (
<View style={styles.container}>
<View style={styles.banner}>
<View style={styles.profile}>
<Image
source={{ uri: 'https://i.stack.imgur.com/SXxvF.jpg' }}
style={{width: 100, height: 100, overflow: "hidden"}}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
alignItems: 'center',
},
banner: {
backgroundColor: '#BF3EFF',
height: screen.width * 2,
width: screen.width * 2,
borderWidth: 5,
borderColor: 'orange',
borderRadius: screen.width,
position: 'absolute',
bottom: screen.height - screen.height*0.3,
alignItems: 'center',
},
profile: {
width: 100,
height: 100,
backgroundColor: 'pink',
position: 'absolute',
bottom: -50,
borderRadius: 50,
borderWidth: 2,
borderColor: 'white',
overflow: "hidden"
},
});

Related

How to move an element to bottom of div

I am trying to implement waves image at the bottom of the screen as shown in image below. I have tried alignSelf:'flex-end' but it does not work. If i give top with dimensions then if screen size change image top also change. how to implement waves image at the perfect bottom?
I have also tried svg but could not make it work.
Here is my code
import React from 'react';
import {
View,
Text,
Dimensions,
TextInput,
StyleSheet,
Image,
} from 'react-native';
import database from '#react-native-firebase/database';
import auth from '#react-native-firebase/auth';
import Otp from '../assets/otp.svg';
import Waves from '../assets/waves.svg';
import {Icon} from 'native-base';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Login = () => {
return (
<View style={styles.container}>
<View style={styles.view1}>
<View style={styles.header}>
<Icon type="AntDesign" name="arrowleft" style={styles.icon} />
<View style={styles.headerView}>
<Text style={styles.headerText}>OTP Verification</Text>
</View>
</View>
<Otp width={250} height={130} style={{top: -40}} />
</View>
<View style={styles.view2}>
<View style={styles.mainDiv}>
<View style={styles.loginForm}></View>
<View style={styles.iconDiv}></View>
</View>
<View style={styles.waves}>
{/* <Waves /> */}
<Image
style={styles.wavesImg}
source={require('../assets/waves.png')}
/>
</View>
</View>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
},
view1: {
flex: 1,
backgroundColor: '#e69545',
alignItems: 'center',
justifyContent: 'space-around',
},
view2: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
header: {
// backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'space-around',
},
headerView: {alignItems: 'center', width: '80%'},
headerText: {color: '#fff', fontSize: 27},
icon: {
color: '#fff',
// width: 40,
fontSize: 35,
},
mainDiv: {
backgroundColor: '#fff',
width: (windowWidth / 10) * 8,
height: (windowHeight / 100) * 40,
position: 'absolute',
borderRadius: 25,
top: -60,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
},
waves: {
// // height: 300,
// position: 'absolute',
// bottom: 0,
// backgroundColor: 'green',
// position: 'absolute',
// top: (windowHeight / 10) * 3.1,
width: '100%',
height: 130,
// alignSelf: 'flex-end',
marginTop: (windowHeight / 10) * 3,
},
wavesImg: {
width: '100%',
height: 130,
},
});
I think you should try to put the style for the waves like this:
waves: {
height: 130,
width: windowWidth,
bottom: 0,
position: 'absolute'
}

How to create 3D button with gradient colour - React Native?

In React Native how would you build a button like the below?
I have managed to get this far:
However there is an issue with the border. As you can see there is a gap between the border radius and the linear gradient component. This seems to be an issue caused by using LinearGradient as it does not exist if the Linear Gradient component is replaced with a button component for example.
import React, { useState} from "react";
import {ImageBackground, StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
marginContainer: {
flex: 1,
flexDirection: "column",
margin:20
},
buttonContainer:{
flex:3,
justifyContent: 'center',
alignContent: "center",
alignItems:"center"
},
modeButton:{
width:300,
height:100,
borderRadius:20,
borderRightWidth: 1,
borderLeftWidth:1,
borderBottomWidth: 14,
borderColor: '#024e51',
elevation:30,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowOpacity: 0.8,
elevation: 30,
shadowRadius: 15 ,
shadowOffset : { width: 1, height: 13},
},
pressableArea:{
flexDirection:"row",
justifyContent: 'center',
alignItems: 'center',
width:"100%",
height:"100%"
}
});
function SelectModeScreen() {
return(
<View style={styles.container}>
<View style={styles.marginContainer}>
<View style={[styles.buttonContainer,{ backgroundColor: "darkorange" }]} >
<LinearGradient colors={['#5be9aa', '#09949d']} style={styles.modeButton}>
<TouchableOpacity style={styles.pressableArea} >
</TouchableOpacity>
</ LinearGradient>
</View>
</View>
</View>
)
}```
Here is the Working Example: Expo Snack
import React, { useState } from 'react';
import {
ImageBackground,
StyleSheet,
View,
Text,
TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
buttonGrad: {
height: 50,
width: 200,
borderRadius: 10,
position: 'absolute',
bottom: 5,
},
buttonParent: {
height: 50,
width: 200,
borderRadius: 10,
backgroundColor: '#024e51',
},
});
function SelectModeScreen() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => console.log('btn pressed')}>
<View style={styles.buttonParent}>
<LinearGradient
colors={['#5be9aa', '#09949d']}
style={styles.buttonGrad}></LinearGradient>
</View>
</TouchableOpacity>
</View>
);
}
export default SelectModeScreen;
if you want to add shadow around the button add below style properties to above answer buttonParent style
...
buttonParent: {
...
shadowColor: 'black',
shadowOpacity: 1,
shadowOffset: {width: 2, height: 2},
shadowRadius: 10,
elevation: 8,
}
And by this properties you can make any type of elevated view

How to set different heights on columns with flex-direction: 'row'

I'm trying to set container with two columns with different heights.
I have my container which has flex-direction: 'row' and flexWrap: 'wrap'.
Now I want to display there elements (only two can fit into container width) with different heights. I know that this can't be done with just flexbox, because rows has to be the same height when wrapping. So my question is: can this be done in React Native when Flexbox is default display type?
Code:
Container:
import React from 'react';
import {StyleSheet, View} from 'react-native';
import Reminder from './../components/reminders/Reminder';
const reminders = require('../../public/reminders.json');
const RemindersPage = () => {
return (
<View style={styles.reminders}>
{reminders.map((reminder) => {
return <Reminder key={reminder.id} reminder={reminder} />;
})}
</View>
);
};
const styles = StyleSheet.create({
reminders: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
});
export default RemindersPage;
Element:
import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
const Reminder = ({reminder}) => {
let source = require('./../../../public/forest.jpg');
return (
<View style={styles.reminder}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={source} />
</View>
<View style={styles.reminders}>
{reminder.alerts.map((alert) => {
return (
<View style={styles.alert} key={alert.time}>
<Text style={styles.time}>{alert.time}</Text>
</View>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
reminder: {
minWidth: '48%',
height: 'auto',
backgroundColor: '#333',
color: 'white',
padding: 5,
marginVertical: 4,
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'white',
alignSelf: 'flex-start',
},
imageContainer: {
alignItems: 'center',
borderStyle: 'solid',
borderBottomWidth: 1,
borderColor: 'white',
paddingBottom: 8,
},
image: {
width: '100%',
height: 150,
resizeMode: 'cover',
},
alerts: {
flexDirection: 'column',
marginTop: 5,
},
alert: {
flexDirection: 'row',
},
time: {
fontWeight: 'bold',
color: 'white',
textShadowColor: 'black',
textShadowOffset: {width: 0, height: 0},
textShadowRadius: 5,
},
});
export default Reminder;
My goal is that the element with red frame goes up as the arrow is pointing.
It should looks like this:
I don't want to set flex-direction to 'column' beacause I want this page to be scrollable.

Enable overflow in native-base cards

I have a component in a website that looks like this:
Regular card
It's basically a div with an image inside it, but the image has a margin-top of -50 so that it overflows off the card.
I would like to accomplish the same thing with react-native and native-base. Here is the relevant code:
render() {
return (
<View style={styles.container}>
<Card>
<CardItem style={{ marginTop: -50, justifyContent: 'center' }}>
<Image style={styles.image} source={{ uri: this.state.band.imageComponent.link }} />
</CardItem>
</Card>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 150
},
image: {
width: 150,
height: 150,
)
And the result looks like this:
React-native card
As you can see, the picture is cutoff at the top. How can I keep the image overflow and have it overlay the card like in my first image?
Overflow is not supported in Android. There are lots of open issues for that. Check some of them here and here.
Here's an npm package that apparently solves that issue that you could try.
Otherwise you can use a workaround for that I found on this medium post.
According to your image you have to wrap your image and the container inside another View as siblings and then position them absolutely.
Here's the code that I tweaked a little bit from that post. You can replace the View according to your Card and CardItem styles.
<View style={styles.container}>
<View style={styles.cardSection1}>
<Image style={styles.image} source={{ uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image' }} />
</View>
<View style={styles.cardSection2}>
</View>
</View>
const styles = {
container: {
flex: 1,
backgroundColor: 'grey',
alignItems: 'center'
},
image: {
width: 150,
height: 150,
},
cardSection1: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 50 / 2,
zIndex: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 7,
},
cardSection2: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 25,
width: 300,
height: 150,
borderRadius: 8,
backgroundColor: 'white',
zIndex: 1,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 5,
}
}
This is the output that I got.
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TextInput,Dimensions,Image } from 'react-native';
import ButtonRoundBorder from '../components/ButtonRoundBorder';
const window = Dimensions.get('window')
// create a component
class Login extends Component {
render() {
return (
<View style={styles.container}>
<Image style={{width:window.width,height:window.height,position:'absolute'}} source={require('../images/bg2.jpeg')}/>
<View style={styles.overlayImageStyle} >
<Image style={{flex:1,borderRadius:80}} resizeMode={'contain'} source={require('../images/profile.jpg')} />
</View>
<View style={styles.cardStyle}>
<View style={styles.insideCard}>
<Text style={{fontWeight:'bold',fontSize:20,alignSelf:'center'}}>Login</Text>
<TextInput style={[styles.textInputStyle,{marginTop:30}]} underlineColorAndroid='#000000' placeholder='Enter Email' />
<TextInput style={[styles.textInputStyle,{marginTop:20}]} underlineColorAndroid='#000000' placeholder='Enter Password' />
<ButtonRoundBorder style={{marginTop:40}} title='Login'/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
backgroundColor: 'transparent',
},
overlayImageStyle:{
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 100/2,
backgroundColor: 'white',
top:50,
shadowColor: '#000',
// position: 'absolute',row
// shadowOpacity: 0.2,
// shadowRadius: 10,
elevation: 7,
},
cardStyle:{
// alignItems: 'center',
// justifyContent: 'center',
// position: 'absolute',
top: 80,
width: window.width - 40,
height: window.height - 200,
borderRadius: 8,
backgroundColor: 'white',
// backgroundColor: '#7E57C2',
shadowColor: '#000',
elevation: 5,
},
insideCard:{
top: 80,
alignContent: 'center',
justifyContent: 'center',
flexDirection:'column',
},
textInputStyle:{
width:300,
height:40,
alignSelf:'center',
}
});
//make this component available to the app
export default Login;
here is the link for screenshot

React Native Image front of other view

I want to write stylesheet to display a loyout like this image:
avatar:
And I write code like this:
<View style={styles.header}></View>
<View style={styles.meInfor}>
<Image style={styles.avatar}
source={require('../../images/cristiano-ronaldo.jpg')} />
</View>
and style:
header:{
width: width,
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
width: width,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
avatar: {
marginTop: -50,
width: 100,
height: 100,
borderRadius: 100,
}
I use marginTop: - 50 to pull the avatar to top, but the result like this:
bad result:
How can i do to style this avatar like the first image?
Try this code it run well on my case
Component
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, Dimensions } from 'react-native';
export default class App extends Component {
render() {
const {header, meInfor, avatar, container} = styles;
return (
<View style={container}>
<View style={header}></View>
<View style={meInfor}></View>
<Image style={avatar}
source={{uri: 'http://infosahabat.com/wp-content/uploads/2015/12/Permainan-Bola-Besar.jpg'}}
/>
</View>
);
}
}
And this for the style
Style
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightgray',
},
header:{
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
backgroundColor: '#FFF',
top: 0,
height: 50,
width: (Dimensions.get('window').width),
},
avatar: {
position: 'absolute',
top: 50,
left: (Dimensions.get('window').width / 2) - 50,
alignItems: 'center',
width: 100,
height: 100,
borderColor: 'black',
borderWidth: 1,
borderRadius: 100,
}
});
Change your stylesheet like this
header : {
width: width,
height: 100,
backgroundColor: '#1270BA'
},
meInfor : {
position: 'absolute',
width: width,
alignItems: 'center',
justifyContent: 'center'
},
avatar : {
marginTop: 50,
width: 100,
height: 100,
borderRadius: 100
}

Resources