I have a JS class
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Avatar, Accessory } from 'react-native-elements';
import PropTypes from 'prop-types';
import MenuButton from './MenuButton';
import AppStyles from '../AppStyles';
import Api from '../Api';
export default class DrawerContainer extends React.Component {
render() {
const { navigation, onLogout } = this.props;
return (
<View style={styles.content}>
<Avatar size={100}
rounded
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
/>
<View style={styles.container}>
<MenuButton
title="Home"
source={AppStyles.iconSet.home}
onPress={() => {
navigation.navigate('Home');
}}
/>
<MenuButton
title="Logout"
source={AppStyles.iconSet.logout}
onPress={() => {
onLogout();
Api.logout();
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 75
},
container: {
flex: 1,
alignItems: 'center',
paddingHorizontal: 20,
alignItems: 'flex-end'
},
});
DrawerContainer.propTypes = {
navigation: PropTypes.object,
onLogout: PropTypes.func,
};
Here is the output generated from the same.
What I want to achieve is to have a gap between the image and the icons displayed. I tried using padding but the text overflows with the same. Can anyone suggest as to what wrong am I doing here?
container: {
flex: 1,
alignItems: 'center',
paddingHorizontal: 20,
alignItems: 'flex-end'
margin-top: 10%;
},
Try to reate a margin-top for .container
Related
With react-native, I'm looking forward having a TextInput stuck with a MaterialIcons.Button within the same line.
I want the whole elements be centered horizontally but cannot achieve this with the following code:
import React from 'react';
import {
StyleSheet, TextInput, View,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
const WordInput = () => {
return (
<View style={styles.container}>
<View style={styles.textInputContainer}>
<TextInput
textAlign="left"
/>
</View>
<View style={styles.arrowButtonContainer}>
<MaterialIcons.Button
name="arrow-forward-ios"
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flex: 1,
},
textInputContainer: {
flex: 1,
alignItems: 'flex-end',
justifyContent: 'center',
},
arrowButtonContainer: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
},
});
Here is the associated expo snack link.
The problem is that when I type text inside the TextInput, the Button doesn't move at all.
I would like it to dynamically shift to the right when the TextInput's width grow. The overall should be horizontally centered.
Does anyone know how I can proceed?
Thanks!
Unfortunately <TextInput> doesn't support any sort of "auto-growing" behaviour by default, but you could implement something yourself using a hidden <Text> layer that has the same font styling and sizing rules as your <TextInput>. If you then render your input value to that <Text> element, you can measure the layout of that element and apply the measured width to your <TextInput> component.
import { useState } from 'react';
import { StyleSheet, TextInput, View, Dimensions, Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
export default function App() {
const [value, setValue] = useState();
const [containerWidth, setContainerWidth] = useState(
Dimensions.get('window').width
);
const [textWidth, setTextWidth] = useState(0);
const [buttonWidth, setButtonWidth] = useState(0);
const inputWidth = Math.min(textWidth, containerWidth - buttonWidth);
return (
<View style={styles.root}>
<View
style={styles.inner}
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
<Text
style={styles.hiddenText}
onLayout={(e) => setTextWidth(e.nativeEvent.layout.width)}
numberOfLines={1}
accessibilityElementsHidden
importantForAccessibility="no-hide-decendants">
{value}
</Text>
<TextInput
textAlign="left"
placeholder="enter text"
style={[styles.input, { width: inputWidth }]}
onChangeText={setValue}
/>
<View onLayout={(e) => setButtonWidth(e.nativeEvent.layout.width)}>
<MaterialIcons.Button name="arrow-forward-ios" />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
root: {
flex: 1,
justifyContent: 'center',
},
inner: {
flexDirection: 'row',
justifyContent: 'center',
borderWidth: 1,
borderColor: 'red',
},
input: {
borderWidth: 1,
borderColor: 'green',
minWidth: 100,
},
hiddenText: {
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
},
});
Here's an expo snack example.
How do you align items to the left and the right in React Native?
Whatever combination of flexbox properties I try, the two sets of text are stuck next to each other like this:
How do you make it so "Sign In" is on the right side of the screen and Repositories on the left?
Here is my code:
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
flex: 1,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
},
nesteddivright: {
flex: 1,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
},
scrollbar: {
display: 'flex',
justifyContent: 'space-between'
}
});
const AppBar = () => {
return <><View style={styles.container}>
<ScrollView style="scrollview" horizontal>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</ScrollView>
</View>
</>
};
export default AppBar;
App:
import Main from './src/components/Main'
import { StatusBar } from 'expo-status-bar';
import { NativeRouter } from 'react-router-native';
export default function App() {
return (
<>
<NativeRouter>
<Main/>
</NativeRouter>
<StatusBar style="auto" />
</>
);
}
As you can see, I have tried putting justify-content: space-between on the parent div and that does nothing.
I also tried this solution and it has done nothing: Aligning elements left, center and right in flexbox
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
display: "flex",
justifyContent: "space-between",
minWidth: '100%',
flexDirection: "row"
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
},
nesteddivright: {
},
scrollbar: {
}
});
const AppBar = () => {
return <><View style={styles.container}>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</View>
</>
};
export default AppBar;
Steps to solve issue:
Take out the scrollview component.
set Display to flex, justify Content to space-between, minWidth to 100% AND flex Direction to Row in parent component.
Not optimal as I need the Scrollview component in there as well, I will need to find a solution that allows me to have that component as a child.
In my React-Native app I have an icon and SearchBar in my header (from react navigation).
The following code:
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle:
<View style={{ flex: 1, flexDirection: "row", paddingHorizontal: 15, alignItems: "center" }}>
<StatusBar default style={{ flex: 1, height: getStatusBarHeight() }} />
<Icon name="chevron-left" size={28} />
<SearchBar round platform={"default"} placeholder="Search" containerStyle={{
flex: 1, backgroundColor: "transparent"
}} />
</View>,
headerStyle: {
backgroundColor: '#e54b4d',
}
};
}
outputs this:
So far so good. However, I want to have padding below the SearchBar. In other words, I want to have the distance from the top of the screen to the SearchBar as a padding below the SearchBar. (I can obtain the distance value using getStatusBarHeight() from rn-status-bar-height)
However, if I put paddingBottom: getStatusBarHeight() to the headerStyle, I get this result:
Basically, now I have the padding that I wanted, however, the StatusBar overlaps with the SearchBar.
How can I put paddingBottom without making the StatusBar and SearchBar overlap?
To change the padding of the header in your case you'll need to change headerTitleContainerStyle and not headerTitle.
For example :
headerTitleContainerStyle: { paddingVertical: 10 }
You can still check the doc.
For ios you will need to set backgroundColor.Below code is fit for android ios both.Hope it helps you.
import React, { Component } from 'react';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import {
Modal,
Button,
View,
Text,
StyleSheet,
StatusBar,
Image,
Platform,
} from 'react-native';
import { SearchBar, Icon } from 'react-native-elements';
export default class AssetExample extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: (
<View
style={{
flex: 1,
backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
height: StatusBar.currentHeight,
}}>
<Icon name="chevron-left" size={28} />
<SearchBar
round
platform={'default'}
placeholder="Search"
containerStyle={{
flex: 1,
backgroundColor: 'transparent',
}}
/>
</View>
),
headerStyle: {
backgroundColor: '#e54b4d',
},
};
};
render() {
return (
<View style={styles.container}>
<Text>Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});
when i checked your code on my device its properly viewing with padding.
So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly. I then went back to what I originally did but still having the same issue. I should've committed it when it worked.
Any idea where I went wrong?
Here's my code:
import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
openModal() {
this.setState({modalVisible: true});
}
closeModal() {
this.setState({modalVisible: false});
}
render() {
return (
<View style={styles.container}>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.closeModal()}
>
<TouchableHighlight
style={styles.modalContainer}
onPress={() => this.closeModal()}
>
<Text>"Words n stuff"</Text>
</TouchableHighlight>
</Modal>
<View
style={styles.upperContainer}
/>
<View
style={styles.lowerContainer}
/>
</View>
);
}
}
}
Styles:
modalContainer: {
flexGrow: 1,
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
},
container: {
flexGrow: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
upperContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 18,
width: screenWidth,
marginTop: -140,
},
lowerContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'space-around',
width: screenWidth,
},
Try to add transparentproperty to your Modal.
Example:
<Modal
transparent
...>
...
</Modal>
Doc: https://facebook.github.io/react-native/docs/modal.html#transparent
Try transparent={true} on <Modal />
I am creating a mobile application with React Native and I decided to use a navigation bar that comes from the site 'https://github.com/beefe/react-native-navigation-bar', but I do not know how to use it in my code.
I would like you to send me examples of the navigation bar of the site 'https://github.com/beefe/react-native-navigation-bar'.
This document is clearly shows how to use this component. Just 2 steps:
Install package.
npm install react-native-navigation-bar --save
Import and use. Change attributes the way you like.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import NavigationBar from 'react-native-navigation-bar';
export default class Example extends Component {
render() {
return (
<View>
<NavigationBar
title='Main title'
height={50}
leftButtonTitle='back'
rightButtonTitle='forward'
/>
<Text>ABC</Text>
</View>
);
}
}
I think you should use a plugin: navigationbar-react-native
First, if you use react-navigation you should hide header-bar and use custom header-bar
export const RootStack = createStackNavigator(
{
App: {
screen: AppComponent,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'App',
}
);
1, Install package
npm i navigationbar-react-native --save
2, Using
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,Image,
View,
TouchableOpacity,
} from 'react-native';
import NavigationBar from 'navigationbar-react-native';
const ComponentLeft = () => {
return(
<View style={{ flex: 1, alignItems: 'flex-start'}} >
<TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}>
<Image
source={require('./img/ic_back.png')}
style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }}
/>
<Text style={{ color: 'white', }}>Back Home</Text>
</TouchableOpacity>
</View>
);
};
const ComponentCenter = () => {
return(
<View style={{ flex: 1, }}>
<Image
source={require('./img/ic_logo.png')}
style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }}
/>
</View>
);
};
const ComponentRight = () => {
return(
<View style={{ flex: 1, alignItems: 'flex-end', }}>
<TouchableOpacity>
<Text style={{ color: 'white', }}> Right </Text>
</TouchableOpacity>
</View>
);
};
class App extends Component {
render() {
return (
<View style={styles.container}>
<NavigationBar
componentLeft = { () => {<ComponentLeft /> }
componentCenter = { () => {<ComponentCenter /> }
componentRight = { () => {<ComponentRight /> }
navigationBarStyle= {{ backgroundColor: ''#215e79'' }}
statusBarStyle = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
/>
</View>
);
}
}
Easy create custom header bar in react native