how can i create tab bar like this in react native?
google tasks tab bar
is there any sample like this?
Using an Image you can achieve it
Sample Snack : https://snack.expo.io/#msbot01/intelligent-croissant
import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor:'white', height:'10%', bottom:0, position:'absolute', zIndex:1, width:'100%', justifyContent:'space-between',paddingLeft:15,paddingRight:15, flexDirection:'row', alignItems:'center', shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 5 }}>
<View>
<Icon name="bars" size={25} color="grey" />
</View>
<View style={{height:'100%',width:100, backgroundColor:'white'}}>
<Image style={{width:100,paddingBottom:'20%', position:'absolute', zIndex:3, bottom:'61%' }} source={require('./bottom round 2.png')} />
</View>
<View>
<Icon name="ellipsis-v" size={25} color="grey" />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: 'white',
position:'relative',
}
});
I created one like this with an SVG in the middle. Left and right is an empty view with a width and a background color. In the middle the SVG component. The floating button is made with an absolute position. I don't know if there is a better way to do this, but that's my solution.
I have created one using SVG and path and I took help from following Code
https://itnext.io/reactnative-curved-tabbar-dc62e681c24d
also the github code : https://github.com/alex-melnyk/clipped-tabbar
Hope this is helpful. Thanks
Related
I am trying to acheive a styling as shown in the image attached below
See how here the fingerprint icon happens to be inside the border of the Textinput field but instead I am getting the output as shown below
PS:- ignore the left and right side black color borders it happens to be the simulator body just focus on the UI.
Here's my code :-
import { View, Text, TextInput, StyleSheet } from 'react-native'
import React from 'react'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
const TestAtom = () => {
return (
<View style={styles.searchSection}>
<TextInput style={styles.input} placeholder='User' onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"/>
<Icon style={styles.searchIcon} name='fingerprint' size={20} color= '#000' />
</View>
)
}
const styles = StyleSheet.create({
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
// padding: 10
paddingRight: 10
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
borderBottomColor: '#000',
borderBottomWidth: 1
}
});
export default TestAtom
Can anyone help me with it.
You should make a View and place the Text Input and Fingerprint icon inside.
A small example of how it will look like.
<View style={{
borderWidth:1,
flex:1,
flexDirection:'row',
alignItems:'center'
}}>
<TextInput/>
<FingerIcon/>
</View>
Have the Textinput and the fingerprint icon as two components in the same view styled as flex-direction:row. Have the bottom ruler part as a separate item which draws under the View of Textinput and the Icon.
import { View, StyleSheet,SafeAreaView,TextInput } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
function UIComponent(){
<View style={styles.container}>
<View style={styles.componentWrapper}>
<View style={styles.passwordFieldWrapper}>
<TextInput style={styles.textInput} placeholder='umana Password'>
</TextInput>
<MaterialCommunityIcons name="fingerprint" color='green' size={24} />
</View>
<View style={styles.bottomPart}>
</View>
</View>
</View>
}
export default UIComponent
const styles = StyleSheet.create({
container:{
backgroundColor:'#ffffff',
flex:1
},
componentWrapper:{
alignItems:'center',
justifyContent:'center'
},
passwordFieldWrapper:{
flexDirection:'row'
},
textInput:{
width:'50%'
},
bottomPart:{
marginTop:3,
borderBottomColor:'gray',
borderBottomWidth:1,
width:'60%'
}
})
I'm creating a react native app and I need to create a curved screen design. How to create a curve design like the below screen.
This is what I tried here,
My sample codes,
import React from 'react';
import {
StyleSheet,
Text,
View,
StatusBar,
} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<View style={styles.container1}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container2}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container3}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container4}>
<Text style={styles.name}>Container1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
container1: {
backgroundColor: '#3d06d6',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container2: {
backgroundColor: '#0cad95',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container3: {
backgroundColor: '#d6a606',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container4: {
backgroundColor: '#06bad6',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
});
I want to curve my container edges like the first picture. I am able to make curves of the bottom edges. And How can I make curve designs like the first image? and also how can I add some animations into the container when I touch the container to open another screen? Is there any way to do this design using any style with "borderRadius" or any other way? And I don't want to use any library like react-native-svg.
If you need a Linear Gradient as the background. Just giving the color of the next box will not be the best option.
Assume "value" as the border-radius. ie the curve
Give a marginTop and paddingTop for each container.
marginTop : -value,
paddingTop : value,
Also assign zIndex in decending order for each container.
You can set zIndex with respect to the index, if you are looping through an array.
Result
Sample code
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
const data = ['', '', ''];
const App = () => {
return (
<View style={styles.container}>
{data.map((item, index) => (
<View style={[styles.item, {zIndex: data.length - index}]}> // setting zIndex here
<LinearGradient
style={StyleSheet.absoluteFill}
colors={['#4c669f', '#3b5998', '#192f6a']}
/>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
zIndex: 1,
},
item: {
height: 250,
borderBottomLeftRadius: 100, // logic goes here
marginTop: -100, // move container
paddingTop: 100, // move inner item down
overflow: 'hidden',
},
});
export default App;
You can simply wrap your view inside a normal view and set the background colour of the next box which will give the output you need.
<View style={{ backgroundColor: '#0cad95' }}>
<View style={styles.container1}>
<Text style={styles.name}>Container1</Text>
</View>
</View>
<View style={{ backgroundColor: '#d6a606' }}>
<View style={styles.container2}>
<Text style={styles.name}>Container1</Text>
</View>
</View>
this is my genymotion screen !!!!
this is my code . Just react-native program And the trouble in my photo.Android is Not , IOS is great .how hack in android to make it right .
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class TestScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text></Text>
<View style={styles.parent}>
<View style={styles.children}>
<Text>my content </Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
},
parent: {
width:300,
height: 40,
backgroundColor: 'yellow',
alignItems:'center',
position:'absolute',
},
children:{
height:20,
justifyContent: 'center',
top:-10
}
})
How should I Fix it
Overflow is not supported on Android: https://github.com/facebook/react-native/issues/6802
You can try this library:
https://github.com/entria/react-native-view-overflow
Or you could try to do some sort of absolute positioning with your view, but it might not be perfect. The below example puts all of the views in one parent, and then offsets the text to overlap both with an absolute position.
render() {
return (
<View style={styles.container}>
<View style={{ height: 40}}/>
<View style={{ height: 40, backgroundColor: "yellow"}}/>
<View style={{ position: "absolute", top: 30}}>
<Text>my content </Text>
</View>
</View>
)
}
I use react-native-swiper and i want to add a text above my image.
I try to set style container image paragraph, it is still not working.
What should i do about the style setting ?
Any help would be appreciated. Thanks in advance.
import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
const dimensions = Dimensions.get('window').width;
class About extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Swiper
style={styles.wrapper}
height={200}
paginationStyle={{bottom: 10}}
>
<View style={styles.container}>
<Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
<Text style={styles.paragraph}>How to let me show above the img.</Text>
</View>
<View style={{ flex: 1 }}>
<Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
</View>
</Swiper>
<View style={{ flex: 2 }}>
<Text>Hi</Text>
</View>
</View>
);
}
}
const styles = {
wrapper: {
},
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
image: {
flexGrow:1,
height:null,
width:null,
alignItems: 'center',
justifyContent:'center',
},
paragraph: {
textAlign: 'center',
},
};
export default About;
Here is my situation now:
I hope it becomes like this:
position="absolute" will make it work as Android RelativeLayout.
If you want set view on top set marginTop to 0.
After seeing your requirement. You can simply use ImageBackground
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
See facebook docs
I am just starting out with React Native and I am developing an app using RN ... I am bit stuck here ... I have a form in one of the app's component that have couple of TextInputs aligned side by side like in the image below
Here is the code that I have written trying to achieve the above design.
import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native';
export default class AddItems extends Component {
onAdd() {
alert('Hello');
}
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}
}
const addItemStyles = StyleSheet.create({
wrapper: {
padding: 10,
backgroundColor: '#FFFFFF'
},
inputLabels: {
fontSize: 16,
color: '#000000',
marginBottom: 7,
},
inputField: {
backgroundColor: '#EEEEEE',
padding: 10,
color: '#505050',
height: 50
},
inputWrapper: {
paddingBottom: 20,
},
saveBtn: {
backgroundColor: '#003E7D',
alignItems: 'center',
padding: 12,
},
saveBtnText: {
color: '#FFFFFF',
fontSize: 18,
}
});
But instead I am getting the view like this.
I know this could be a minor thing but as I said above that I am just starting with React Native so you can consider me as a noob ... Thanks in advance for your help. Looking forward to your answers.
use "flexDirection" in style
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}