Currently, my username text appears in the center of the view. I want to change it such that it appears on the exact right of the thumbnail. If I remove the alignItems: 'center', from the item, it disturbs the whole style. How else can I fix this?
import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';
return (
<View style={styles.item}>
<TouchableOpacity>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}
/>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>USER NAME</Text>
</View>
<Button
rounded
style={styles.deleteButton}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'pink',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(70),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
thumbnail: {
height: 70,
width: 70,
position: 'relative',
},
nameContainer: {
//flex: 1,
// alignItems: 'center',
// textAlign: 'center',
},
userName: {
paddingRight: moderateScale(55),
paddingLeft: moderateScale(20),
//textAlign: 'center',
color: 'white',
fontWeight: '900'
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
horizontalLine: {
marginTop: moderateScale(30),
width: '87%',
height: moderateScale(1),
backgroundColor: 'grey',
alignSelf: 'center',
},
});
I tried creating a snack expo but I am unable to use native base in it.
You have added unwanted padding, Change the styles like below and it will place the text next to the Thumbnail.
nameContainer: {
flex: 1,
},
userName: {
color: 'white',
fontWeight: '900'
},
Related
I am trying to add images to my application home page but it seems whenever I use this.props.imageUri it just doesn't show the images anymore. I tried to do it using Image source.. it works but when I created Location.js and add this.props.imageUrl the image doesn't show anymore.. so I don't know what to do.
This is my Home.js file
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView>
<Location
imageUri={require("../home/nicosia.png")}
name="nicosia"
/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
}
And this is Location.js
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";
class Location extends Component {
render() {
return (
<View
style={{
alignItems: "center",
height: 130,
width: 130,
marginLeft: 20,
borderWidth: 0.5,
borderColor: "#dddddd",
}}
>
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
</View>
);
}
}
export default Location;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
Set width and height to a fixed size or just omit them.
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
{/* Don't set width and height to null */}
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
I have put an icon with the text box but its not showing in a same line,there is problem in alignment.I have tried many solutions . I am using flex Box.Any help would be appreciated.I set parent view to column and set child view in which icon and text box is going to show to row to align it in the same row but its not aligning it proper.i don't knows where the problem is occurring.
import {
View,
ImageBackground,
Text,
StyleSheet,
Image,
KeyboardAvoidingView,
TextInput,
TouchableOpacity
} from "react-native";
import React from "react";
import { AntDesign } from "#expo/vector-icons";
import { Feather } from "#expo/vector-icons";
export default function Login() {
return (
<View>
<ImageBackground
style={styles.backgroundImage}
source={require("../assets/bg_image.png")}
>
<View style={styles.container}>
<Image source={require("../assets/ic_logo.png")} />
<Text style={styles.welcomeText}>Welcome to SMACC</Text>
<KeyboardAvoidingView behavior="position">
<View style={styles.loginInfo}>
<View style={styles.inputField}>
<Text>User Name</Text>
<View style={styles.inputText}>
<AntDesign style={styles.icon} name="user" />
<TextInput placeholder="Enter User Name Here" />
</View>
</View>
<View
style={{
borderBottomColor: "#999999",
borderBottomWidth: 1
// marginTop: 12.5
}}
/>
<View style={styles.inputField}>
<Text>Password</Text>
<View style={styles.inputText}>
<Feather style={styles.icon} name="lock" />
<TextInput placeholder="Enter Password Here" />
</View>
</View>
<View style={styles.loginButton}>
<TouchableOpacity>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
<View>
<Text style={styles.forgetPasswordLink}>Foget Password ?</Text>
</View>
</View>
</ImageBackground>
</View>
);
}
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
backgroundImage: {
width: "100%",
height: "100%"
},
welcomeText: {
paddingVertical: 20,
fontSize: 15,
fontFamily: "Roboto-Medium"
},
loginInfo: {
backgroundColor: "#FFFFFF",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
borderRadius: 5,
height: 165,
width: 253
},
inputField: {
flex: 1,
paddingTop: 10,
marginLeft: 20,
//fontSize: 10,
color: "#999999",
fontFamily: "Roboto-Medium"
},
inputText: {
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
},
loginButton: {
flex: 0.6,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1968B3",
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5
},
loginButtonText: {
color: "#FFFFFF",
fontFamily: "Roboto-Medium",
fontSize: 12
},
forgetPasswordLink: {
paddingTop: 10,
fontFamily: "Roboto-Medium",
fontSize: 12,
color: "#333333"
},
icon: {
paddingRight: 5
//paddingTop:7
}
});
Try this as inputText style
inputText: {
flexDirection: 'row',
justifyContent:'space-between',
alignItems:'center',
fontSize: 12,
color: '#000000',
fontFamily: 'Roboto-Medium',
},
feel free for doubts..
Can you try adding display: 'flex' to the css and see if that works?
inputText: {
display: 'flex',
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
}
I have just started using React Native so I am still learning.
I am trying to implement Navigation to my app and almost everything works fine except for one page.
In the app, when the user signs up, he can sign up as either an individual or as an organization, which would lead him to different signing up forms depending on his choice.
However, when I select either option the app crashes and I get the following error:
Uncaught Error: RangeError: Maximum call stack size exceeded, stack.
I have looked online for answers and most of the time it's because there is an infinite loop in the navigation. However, I don't see anywhere in the code where there might be a loop and I did it as I did for the other pages, which, once again, work fine.
Here is the code for the App.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { LinearGradient } from 'expo-linear-gradient';
import WelcomeToKarma from "./components/WelcomeToKarma.js";
import Login from "./components/Login.js";
import ForgotPass from "./components/ForgotPass.js";
import UserRegistration from "./components/UserRegistration.js";
import OpenEmail from "./components/OpenEmail.js";
function InitialScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient
style={{ alignItems: 'center', justifyContent: 'center', flex: 1, width: '100%' }}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}>
<Text style={styles.textHeader}>KARMA</Text>
<Text style={styles.text}>Lorem ipsum dolo ecte </Text>
<Text style={styles.text}>adipisicing elit sed do</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => navigation.navigate('Back')}
>
<Text style={{ color: "white", fontSize: 20, }}>Sign Up</Text>
</TouchableOpacity>
<Text
style={styles.loginText}
onPress={() => navigation.navigate('Loginate')}
>
Already have an account? Login
</Text>
</LinearGradient>
</View>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={InitialScreen} options={{ headerShown: false }} />
<Stack.Screen name="Back" component={WelcomeToKarma} options={{ headerShown: false }} />
<Stack.Screen name="UserRegistration"
component={UserRegistration}
options={{
headerTintColor: '#01b0b0',
title: 'Sign up',
headerTitleStyle: {
textAlign: 'left',
fontWeight: 'bold',
fontSize: 22,
color: 'black',
}
}} />
<Stack.Screen name="Loginate" component={Login}
options={{
headerTintColor: '#01b0b0',
title: 'Login',
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
<Stack.Screen name="ForgotPass" component={ForgotPass}
options={{
headerTintColor: '#01b0b0',
title: 'Forgot Password',
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
<Stack.Screen name="OpenEmail" component={OpenEmail}
options={{
headerTintColor: '#01b0b0',
title: "Forgot Password",
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textHeader: {
color: 'white',
fontSize: 80,
},
text: {
color: 'white',
fontSize: 20,
},
buttonContainer: {
borderColor: 'white',
borderWidth: 2,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 44,
width: 200,
marginBottom: 20,
marginTop: 10,
position: 'absolute',
bottom: 60,
},
loginText: {
color: "white",
fontSize: 15,
marginTop: 10,
marginBottom: 20,
bottom: 10,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'
},
});
Here is the code for WelcomeToKarma.js which is where the user chooses if he is an individual or an organization.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Constants from 'expo-constants';
import heart from '../assets/heart.png';
import earth from '../assets/earth.png';
import Card from './Card.js';
export default class WelcomeToKarma extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.welcomeText}>
<Text style={styles.header}>Welcome to KARMA</Text>
<Text style={styles.text}>Lorem ipsum dolo sit amet, consectetur adip isicing elit, sed do eiusmod</Text>
</View>
<ScrollView
scrollEventThrottle={16}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.scrollViewView}>
<Card imageUri={heart} question="Are you an individual?" page="UserRegistration"></Card
{/* This is where the app crashes when I press the TouchableOpacity*/}
<Card imageUri={earth} question="Are you an organization?" page=""></Card>
{/* And here as well, I know the page parameter is empty, that's because I still haven't done the page for it */}
</ScrollView>
<View style={styles.bottomView}>
<Text style={styles.boldText}>Already on Karma?</Text>
<View style={styles.buttonView}>
<LinearGradient
style={{ borderRadius: 22, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}>
<TouchableOpacity
style={styles.loginButton}
onPress={() => navigate('Loginate')}
>
<Text style={styles.login}>Login</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
marginTop: Constants.statusBarHeight,
alignItems: 'center',
justifyContent: 'center',
},
welcomeText: {
marginBottom: 10,
},
scrollViewView: {
alignItems: 'center',
pagingEnabled: 'true',
showPageIndicator: 'true',
marginBottom: 20,
},
bottomView: {
backgroundColor: 'white',
width: '100%',
marginHorizontal: 20,
paddingBottom: 30,
},
buttonView: {
backgroundColor: 'white',
alignItems: 'center',
width: '100%'
},
header: {
fontSize: 20,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left'
},
text: {
fontSize: 15,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left'
},
boldText: {
fontSize: 15,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left',
fontWeight: 'bold'
},
loginButton: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 44,
width: '85%',
padding: 20,
backgroundColor: 'white',
margin: 2,
},
login: {
color: '#01b0b0',
textAlign: 'center',
fontSize: 20,
},
});
I'm basically trying to pass the ToucheableOpacity onPress as a parameter to Card. The app crashes when I press these buttons.
And here is the code for the Card.js.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class Card extends Component {
constructor(props) {
super(props);
this.navigate.bind(this);
}
navigate(txt) {
this.navigate(txt);
}
render() {
return (
<View style={styles.container}>
<View style={{ justifyContent: 'space-between', alignItems: 'center', flex: 1 }}>
<Image source={this.props.imageUri} style={{ width: '50%', height: '50%', resizeMode: 'cover' }}></Image>
</View>
<View style={{ justifyContent: 'center', flex: 1 }}>
<Text style={{ marginVertical: 5, fontWeight: 'bold' }}>{this.props.question}</Text>
<Text style={{ marginVertical: 5 }}>Lorem ipsum dolor sit amet, consectetur adip isicing elit,
sed do eiusm ut labore et dolore magna aliqua
</Text>
<View>
<LinearGradient
style={styles.signupButtonView}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}
>
<TouchableOpacity
onPress={() => this.navigate(this.props.page)}>
<Text style={styles.signup} >Sign up</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</View>
)
}
}
export default Card;
const styles = StyleSheet.create({
container: {
height: '95%',
width: 250,
borderRadius: 20,
borderBottomWidth: 10,
borderBottomColor: '#01b0b0',
marginHorizontal: 10,
marginVertical: 10,
shadowColor: 'black',
shadowOffset: { width: 0, height: 3 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 8,
padding: 20,
backgroundColor: 'white'
},
signupButtonView: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
padding: 20,
height: 44,
width: 200,
},
signupButton: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
padding: 20,
height: 44,
width: 200,
},
signup: {
color: 'white',
fontSize: 20,
},
sty: {
borderRadius: 30,
}
});
The navigation works perfectly fine with every other page so I don't understand why it can't with this one. Could it be because I am not passing the ToucheableOpacity onPress method correctly? I have tried different ways to pass the onPress as a parameter but it looks like this way is the best way (if not the only?)
I'm also taking any tips and suggestions to improve my coding, as I said: I have just started learning React Native.
This looks very recursive:
navigate(txt) {
this.navigate(txt);
}
You have bound navigate to the class. You are inside the function navigate, and the line in there is calling itself. You will get a stackover.com
You need to pick up the navigate props in 'Card' like you did in 'WelcomeToKarma' and use this to navigate.
const { navigate } = this.props.navigation;
so navigate could become
navigate(txt) {
this.props.navigate(txt);
}
problem solved!
I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup.
I'm new to React Native so other things I did might be wrong, forgive me for that :)
This is a screenshot of the popup when it is open
This is some of the code:
From the Popup component:
render() {
if (!this.props.open) {
return <View />
}
return (
<View style={styles.container}>
<View style={styles.popupStyle}>
<View style={{flex:1, justifyContent: 'center', marginRight: 10}}>
<View style={styles.amountEnterStyle}>
<TextInput
keyboardType={'numeric'}
underlineColorAndroid='transparent'
autoCorrect={false}
style={styles.textInputStyle}
value={this.state.amount}
onChangeText={this._onAmountEnter.bind(this)} />
<Text style={styles.currencyTextStyle}>NIS</Text>
</View>
<View style={styles.separatorStyle} />
<View style={styles.categorySectionStyle}>
{this._renderCategoryDropdown()}
</View>
</View>
<View style={{justifyContent: 'center'}}>
<TouchableWithoutFeedback
onPress={this._onAddPaymentClicked.bind(this)} >
<View style={{width: 110, height:100, backgroundColor: "#ff0000"}} />
</TouchableWithoutFeedback>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
},
amountEnterStyle: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
textInputStyle: {
width: 100,
fontSize: 50,
fontWeight: 'bold',
height: 65,
flex: 1,
marginTop: -20,
paddingBottom: 0,
marginBottom: 0,
marginLeft:10,
textAlignVertical: 'center'
},
currencyTextStyle: {
fontSize: 50,
color: '#c0c0c0',
marginTop: -20,
textAlignVertical: 'center'
},
separatorStyle: {
height: 2,
marginTop: 0,
backgroundColor: '#c0c0c0',
},
categorySectionStyle: {
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: 8
},
categoryColorDotStyle: {
width: 20,
height: 20,
borderRadius: 100/2,
marginLeft: 10,
marginTop: 5,
},
categoryTextStyle: {
fontSize: 24,
marginHorizontal: 4,
color: '#c0c0c0',
marginLeft: 10,
paddingRight: 10,
marginTop: -3
},
popupStyle: {
width: Dimensions.get('window').width - 60,
flexDirection: 'row',
justifyContent: 'space-between',
height: 150,
paddingRight:10,
paddingLeft:10,
borderRadius: 2,
margin: 20,
padding: 10,
opacity: 1,
borderRadius: 10,
backgroundColor: '#ffffff'
},
dropdownSeparator: {
height: 1,
backgroundColor: 'cornflowerblue'
},
And this is the hosting component:
render() {
var totalIncome = this.props.balance.totalIncome;
var totalExpanses = this.props.balance.totalExpanses;
return (
<View style={{flex:1, justifyContent: 'space-between'}}>
<Image pointerEvents='none' source={require('../../res/background.png')} style={styles.container} />
<MainScreenHeader onSettingPress={this._onBalanceSettingsPress.bind(this)}/>
<MainBalanceCounter totalCount={totalIncome} currentCount={totalIncome-totalExpanses} />
<View style={{justifyContent: 'center', alignItems: 'center', marginBottom: 150}}>
<AddPaymentButton onPress={this._onAddPaymentPress.bind(this)} />
<PaymentPopup
open={this.state.paymentPopupOpen}
onAddPaymentClicked={this._onPaymentPopupAddClicked.bind(this)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
innerContainer: {
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
backgroundColor: 'transparent'
},
});
I was trying man things to have a view that will catch clicks that happens outside of the popup, but no success.
Any help will be much appreciated,
Thanks,
Giora.
have you tried out react-native-modalbox? I use it in my applications and it works pretty great. If you have touch events behind the modal, it will close. Also, you can define how large you'd like the modal to be. It doesn't have to take up the whole screen.
Otherwise, you were on the right track. You'd need a TouchableWithoutFeedback component that covers the full width and height of the screen. Your popup would be alongside of this component with a higher zIndex. Let me know if you'd like to go this route and I can provide more advice. Cheers!
I have this header written in CSS and HTML, I'm trying to make it in react native, but seems like position: 'absolute' removes my icon from the scene.
So, In my react-native app I have the following markup:
<View
style={header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>
And the following stylesheet
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.white,
flexDirection: 'row'
},
headerTitle: {
color: colors.black,
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Can someone explain me how to make the style for the react-native header to look like http://jsbin.com/bireqabujo/2/edit?html,css,output ?
Try This
<View style={styles.header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={styles.headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>
And change your style to this
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: 'row'
},
headerTitleWrapper: {flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'black',
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Check This on
https://rnplay.org/apps/iSpc1Q