I'm creating a button using <TouchableOpacity> on react-native.
<View style = {{
flex: 1,
justifyContent: 'flex-end',
paddingBottom: 30,
}}>
<TouchableOpacity
style = {{
justifyContent: 'center',
padding: 10,
height: 30,
width: '100%',
flexDirection: 'row',
}}
onPress = {() => {
this.props.navigation.navigate('Login');
firebase.auth().signOut();
}}>
<Icon
name = 'log-out'
type = 'feather'
color = 'black' />
<Text style = {{
fontWeight: 100,
fontSize: 20
}}>
LOGOUT
</Text>
</TouchableOpacity>
</View>
The output
How do I align the icon and text to the left? And is there a way I can make the icon fully appear?
You can use images that works same as iconsYou can download some great icons from google fonts icons
check this out https://fonts.google.com/icons
So your code will be
<View style = {{
flex: 1,
justifyContent: 'flex-end',
paddingBottom: 30,
}}>
<TouchableOpacity
style = {{
justifyContent: 'center',
padding: 10,
height: 30,
width: '100%',
flexDirection: 'row',
}}
onPress = {() => {
this.props.navigation.navigate('Login');
firebase.auth().signOut();
}}>
<Image src={source to your image} style={{add your style}}/>
</TouchableOpacity>
</View>
so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.
my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.
This is the screen code:
<SafeAreaView style={styles.root}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior='padding'
keyboardVerticalOffset={-200}>
<ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
<Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
<BgImage path={require('../../../assets/images/phone-city.png')} />
<View style={styles.container}>
<Text style={styles.title}>Från</Text>
<TextInput
ref={inputRef}
placeholder='dit namn'
autoCorrect={false}
onSubmitEditing={() =>
props.navigation.navigate('Person Selected')
}
returnKeyType='next'
style={styles.textInput}
placeholderTextColor={placeholderTextColor}
/>
<Text style={styles.paragraph}>
Skriv in vem du är så mormor vet vem träningsprogrammet kommer
ifrån.
</Text>
</View>
<NavButton
style={styles.button}
title='Nästa'
onPress={() => props.navigation.navigate('Capture Image')}
/>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
this is the screen styles:
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.blue
},
container: {
marginHorizontal: 20
},
title: {
color: colors.white,
fontSize: wp('15%')
},
textInput: {
color: colors.white,
fontSize: wp('15%'),
lineHeight: 60,
opacity: 0.5
},
paragraph: {
color: colors.white,
fontSize: wp('6%')
},
button: {
marginHorizontal: 20,
marginBottom: hp('6%'),
alignSelf: 'flex-end'
}
});
these are the navButton code:
<View style={[styles.navButtonContainer, props.containerStyle]}>
<TouchableOpacity
style={[
styles.navButton,
props.style,
{ backgroundColor: dynamicBackgroundColor }
]}
onPress={props.onPress}>
<Text style={[styles.title, { color: dynamicColor }]}>
{props.title}
</Text>
{DynamicIcon}
</TouchableOpacity>
</View>
this are the navbutton styles:
const styles = StyleSheet.create({
navButtonContainer: {
marginTop: 'auto'
},
navButton: {
backgroundColor: colors.blue,
marginLeft: 'auto',
width: wp('45%'),
height: wp('13%'),
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 500,
paddingHorizontal: wp('5%'),
alignItems: 'center'
},
title: {
color: colors.white,
fontSize: wp('6%')
}
});
so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?
regards.
Within my react-native app, I need to take a picture and save it to new - custom album. Album should not be able to be accessed through photos over menu, thus I need to make album private, so captured photos can only be accessed through the app itself. I searched over web and I guess it's possible with react-native-fs or react-native-fetch-blob, but it seems it works only on Android. But it is not exactly what I need. Can you help me please with any documentation, example, code or anything ?
Here is my current Camera component that I already created, where user can take photos, save it to camera roll and access to photos in case s/she wants.
import React, { Component } from 'react';
import {CardItem, Content, Container, Body, Left, Icon, Header, Right, Footer, FooterTab, Button } from 'native-base';
import {
Platform,
StyleSheet,
Dimensions,
Text,
ListView,
View,
Alert,
TouchableOpacity,
Image,
CameraRoll,
ScrollView
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import { RNCamera } from 'react-native-camera';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const {width, height} = Dimensions.get("window"),
vw = width / 100
vh = height / 100
export default class Camera extends Component {
constructor(props)
{ super(props)
this.state = {
buffer: false,
bufferImage: '',
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => true
}),
galleryON: false,
selectedImgTmstmp: '',
cameraType: 'RNCamera.Constants.Type.back',
flashMode: false,
cameraSelf: true
}
}
renderRow(img) {
clr = this.state.selectedImgTmstmp===img.node.timestamp?'blue':'grey';
return(
<CardItem button horizontal={false} onPress={()=>this.setState({selectedImgTmstmp: img.node.timestamp})}
style={{flexDirection: 'column',borderWidth: 3,borderRadius: 4,padding: 0, marginBottom: 5,
borderColor: clr,height: height/4, width: '48%'}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{ uri: img.node.image.uri }}
/>
</CardItem>
);
}
render() {
if(this.state.galleryON){
return(
<Container>
<Content style={{backgroundColor: '#d8d8d8',height: '100%',width: width}}>
<ListView contentContainerStyle={{justifyContent: 'space-around',flexDirection: 'row', flexWrap: 'wrap'}}
dataSource={this.state.dataSource}
enableEmptySections={true}
renderRow={(rowData)=>this.renderRow(rowData)}>
</ListView>
</Content>
<View style={{flexDirection: 'row',width: width, height: 40, backgroundColor: '#ff5a00', alignItems: 'center', justifyContent: 'center'}}>
<Left style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.setState({galleryON: false, selectedImgTmstmp: ''})} style={{fontWeight: 'bold', fontSize: 15}}>Cancel</Text>
</Left>
<Body style={{flex: 2}}>
<Text>Select Image</Text>
</Body>
<Right style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.state.selectedImgTmstmp===''?null:Actions.pop()} style={{fontWeight: 'bold', fontSize: 15}}>Proceed</Text>
</Right>
</View>
</Container>
);
}
return (
this.state.buffer===false?
<Container style={styles.container}>
<Header style={{backgroundColor: '#000000',borderBottomWidth: 1, borderColor: '#FFF'}}>
<Left>
<Button transparent onPress={()=>this.setState({flashMode: !this.state.flashMode})}>
<Icon style={{color: '#FFF'}} name={this.state.flashMode?'ios-flash-outline':'ios-flash'}/>
</Button>
</Left>
<Right>
<Button transparent onPress={()=>this.setState({cameraSelf: !this.state.cameraSelf})}>
<Icon style={{color: '#FFF'}} name='ios-reverse-camera-outline'/>
</Button>
</Right>
</Header>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
type={this.state.cameraSelf?RNCamera.Constants.Type.front:RNCamera.Constants.Type.back}
flashMode={this.state.flashMode?RNCamera.Constants.FlashMode.on:RNCamera.Constants.FlashMode.off}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>Actions.pop()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={this.takePicture.bind(this)}>
<Icon style={{color: '#FFF', fontSize: 40}} name='ios-radio-button-on'/>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.getGallery()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Photos</Text>
</TouchableOpacity>
</View>
</Container>
:
<Container style={{width: width, height: height, alignItems: 'center'}}>
<View style={{width: width, height: height, flexDirection: 'column'}}>
<Image source={{uri: this.state.bufferImage}} style={{width: '100%', height: '90%'}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.setState({bufferImage: '', buffer: false})}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.savePictureToRoll(this.state.bufferImage)}>
<Text style={{color: '#FFFF', fontSize: 25}}>Done</Text>
</TouchableOpacity>
</View>
</View>
</Container>
);
}
getDataSource(posts) {
return this.state.dataSource.cloneWithRows(posts);
}
getGallery(){
CameraRoll.getPhotos({
first: 100,
assetType: 'Photos'
})
.then(photos => {
this.setState({dataSource: this.getDataSource(photos.edges), galleryON: true},()=>console.log(this.state.dataSource))
})
}
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log("DATA: ",data);
console.log(data.uri);
this.setState({buffer: true,bufferImage: data.uri})
}
};
savePictureToRoll(uri){
console.log("DATA.URI: ",this.state.bufferImage);
CameraRoll.saveToCameraRoll(uri, 'photo');
this.setState({bufferImage: '', buffer: false},()=>Alert.alert("IMAGE SAVED"), Actions.pop())
}
}
I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:
jsx:
<Modal style={styles.modal}
isVisible={props.categories.some(x => showModal(x))}>
<Container style={styles.modalView}>
<Header style={styles.header}>
<Left>
<Title
style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
</Title>
</Left>
<Right>
<Button
small
transparent
danger
rounded
icon
onPress={() => props.setAllShowSubcategoriesToFalse()}>
<Icon name="times" size={20} color='#9E9E9E' />
</Button>
</Right>
</Header>
<Content >
<SelectMultiple
labelStyle={styles.label}
items={getDisplaySubcategories(props.categories)}
selectedItems={
props.categories.filter(category => category.selected)
}
onSelectionsChange={props.toggleSubcategory} />
</Content>
</Container>
</Modal>
styles:
const styles = {
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 8,
height: 100
},
modal: {
padding: 10,
height: 100
}
}
Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?
I'm using react-native-modal
How about something like:
<Modal transparent>
<View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
{/* fill space at the top */}
<View style={{ flex: 1, justifyContent: 'flex-start' }} />
<View style={{ flex: 1, backgroundColor: 'white' }}>
{/* content goes here */}
</View>
{/* fill space at the bottom*/}
<View style={{ flex: 1, justifyContent: 'flex-end' }} />
</View>
</Modal>
This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.
Hopefully, that helps some bit
I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.
I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?
You can use combination of View, Icon and TextInput like so:
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
and use flex-direction for styling
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
Icons were taken from "react-native-vector-icons"
Basically you can’t put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting up some simple styling rules.
Here's how it works:
put both Icon and TextInput inside a parent View
set flexDirection of the parent to ‘row’ which will align the
children next to each other
give TextInput flex 1 so it takes the full width of the parent View
give parent View a borderBottomWidth and push this border down with paddingBottom (this will make it appear like a regular textInput with a borderBottom)
(or you can add any other style depending on how you want it to look)
Code:
<View style={styles.passwordContainer}>
<TextInput
style={styles.inputStyle}
autoCorrect={false}
secureTextEntry
placeholder="Password"
value={this.state.password}
onChangeText={this.onPasswordEntry}
/>
<Icon
name='what_ever_icon_you_want'
color='#000'
size={14}
/>
</View>
Style:
passwordContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#000',
paddingBottom: 10,
},
inputStyle: {
flex: 1,
},
(Note: the icon is underneath the TextInput so it appears on the far right, if it was above TextInput it would appear on the left.)
This is working for me in ReactNative 0.60.4
View
<View style={styles.SectionStyle}>
<Image
source={require('../assets/images/ico-email.png')} //Change your icon image here
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
Styles
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
}
In case is useful I share what I find a clean solution:
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChange(text)}
value={value}
/>
<Icon style={styles.icon} name="your-icon" size={20} />
</View>
and then in your css
inputContainer: {
justifyContent: 'center',
},
input: {
height: 50,
},
icon: {
position: 'absolute',
right: 10,
}
import { TextInput } from 'react-native-paper';
<TextInput
label="Password"
secureTextEntry
right={<TextInput.Icon name="eye" />}
/>
You can use this module which is easy to use: https://github.com/halilb/react-native-textinput-effects
You can wrap your TextInput in View.
<View>
<TextInput/>
<Icon/>
<View>
and dynamically calculate width, if you want add an icon,
iconWidth = 0.05*viewWidth
textInputWidth = 0.95*viewWidth
otherwise textInputwWidth = viewWidth.
View and TextInput background color are both white. (Small hack)
//This is an example code to show Image Icon in TextInput//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, TextInput, Image } from 'react-native';
//import all the components we are going to use.
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/user.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/phone.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Mobile No Here"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
});
Expo
Anyone who's struggling on this
you can try to follow mine also
<View style={{flex:1}}>
<KeyboardAvoidingView enabled>
<View style={{flexDirection:'row',paddingBottom:5, borderColor:'#ccc',borderBottomWidth:1}}>
<TextInput
style={{flex:1}}
onChangeText={(UserEmail) => setUserEmail(userEmail)}
placeholder="Password"
placeholderTextColor="#ccc"
autoCapitalize="none"
keyboardType="default"
returnKeyType="next"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
/>
<FontAwesome5 name={"eye"} size={25} style={{alignSelf:'center'}}/>
</View>
</KeyboardAvoidingView>
</View>
Here you have an example I took from my own project, i have just removed what i thought we didnt need for the example.
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
View,
StyleSheet,
Dimensions,
Image
} from 'react-native';
class YourComponent extends Component {
constructor(props) {
super(props);
this._makeYourEffectHere = this._makeYourEffectHere.bind(this);
this.state = {
showPassword: false,
image: '../statics/showingPassImage.png'
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
<Text>button</Text>
<Image style={styles.image} source={require(this.state.image)}></Image>
</TouchableOpacity>
<TextInput password={this.state.showPassword} style={styles.input} value="abc" />
</View>
);
}
_makeYourEffectHere() {
var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
this.setState({showPassword: !this.state.showPassword, image: png});
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
button: {
width: Dimensions.get('window').width * 0.94,
height: 40,
backgroundColor: '#3b5998',
marginTop: Dimensions.get('window').width * 0.03,
justifyContent: 'center',
borderRadius: Dimensions.get('window').width * 0.012
},
image: {
width: 25,
height: 25,
position: 'absolute',
left: 7,
bottom: 7
},
input: {
width: Dimensions.get('window').width * 0.94,
height: 30
}
});
module.exports = YourComponent;
I hope It helps you.
Let me know if it was useful.
you can also do something more specific like that based on Anthony Artemiew's response:
<View style={globalStyles.searchSection}>
<TextInput
style={globalStyles.input}
placeholder="Rechercher"
onChangeText={(searchString) =>
{this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
<Ionicons onPress={()=>console.log('Recherche en cours...')} style={globalStyles.searchIcon} name="ios-search" size={30} color="#1764A5"/>
</View>
Style:
searchSection: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderRadius:50,
marginLeft:35,
width:340,
height:40,
margin:25
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginLeft:10,
borderTopLeftRadius:50,
borderBottomLeftRadius:50,
backgroundColor: '#fff',
color: '#424242',
},
It's now more easier to use with nativebase input hope this will help someone. I used Iconscout and you can use any icon library.
<View style={styles.input}>
<Input leftElement={<UilReact size="30" color="#61DAFB" style={styles.icon}/>} style={styles.input} size={'2xl'} variant="underlined" placeholder="Round" />
</View>
const styles = StyleSheet.create({
input: {
justifyContent:'center'
},
icon: {
marginRight:10
}
});
You can test this too, dont forget to add the style below as well.
<View style={styles.searchContainerStyle}>
<Ionicons name="search" size={24} color="gray"/>
<View style={{ flex: 1 }}>
<TextInput
type="search"
placeholder="Search for doctors & labs"
style={{ marginLeft: Sizes.fixPadding}}
/>
</View>
</View>
searchContainerStyle: {
backgroundColor: "#F5F5F5",
borderRadius: 30.0,
height: 45.0,
flexDirection: "row",
alignItems: "center",
paddingLeft: Sizes.fixPadding + 5.0,
marginBottom: 10,
},
if you are Willing to ADD Your OWN Custome SVG to the Left of Right.
Follow this..
Import svgs from "your Svgs Location"
<TextInputRNP
label="lable"
placeholder="placeholder"
right={<TextInput.Icon icon={() => <svgs.Calender />} size={30} />}
left={<TextInput.Icon icon={() => <svgs.Calender2 />} size={30} />}
/>
Here TextInputRNP is the text Input from React-native-Paper