React Native alert defaults to showing up at the center of the screen. I've been trying to style it so that it shows up at the bottom of the screen - with no success. Does anyone know how I would go about this? I tried position: absolute and bottom: 0 but it still shows up in the center.
I have tried this out let me know if it helps also have designed according to the image.
Copy Paste the code and try.
import React, { useState } from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
Pressable,
Modal,
Dimensions,
Button,
} from 'react-native';
const App = () => {
const [showWarning, SetshowWarning] = useState(false);
const onPressHandler = () => {
SetshowWarning(true);
}
return (
<View style={styles.body}>
<Modal
visible={showWarning}
transparent
onRequestClose={() =>
SetshowWarning(false)
}
animationType='slide'
hardwareAccelerated
>
<View style={styles.centered_view}>
<View style={styles.warning_modal}>
<View style={styles.warning_title}>
<Text style={{
color: '#000000',
fontSize: 25,
fontWeight:'700',
textAlign: 'center',
}}>Unsaved Changes</Text>
<Text style={styles.text}>Are you sure you want to continue?</Text>
</View>
<Pressable
onPress={() => SetshowWarning(false)}
style={styles.warning_button1}
android_ripple={{ color: '#fff' }}
>
<Text style={styles.textKE}>Keep Editing</Text>
</Pressable>
<Pressable
onPress={() => SetshowWarning(false)}
style={styles.warning_button}
android_ripple={{ color: '#fff' }}
>
<Text style={styles.textDC}>Discard Changes</Text>
</Pressable>
</View>
</View>
</Modal>
<Button onPress={() =>onPressHandler()} title="Text This"></Button>
{/* Add Here full code */}
</View >
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
},
centered_view: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00000099',
},
warning_modal: {
width: Dimensions.get('window').width,
height: 200,
backgroundColor: '#eeff0f0',
borderRadius: 20,
top:"31%"
},
warning_title: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eff0f0',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
borderBottomWidth:1,
borderColor:'grey'
},
warning_body: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
},
textKE: {
marginTop:20,
color: '#1485fe',
fontSize: 20,
margin: 5,
textAlign: 'center',
},
textDC: {
marginTop:20,
color: 'red',
fontSize: 20,
margin: 5,
textAlign: 'center',
},
warning_button1: {
height:70,
backgroundColor: '#efeff0',
borderBottomWidth:1,
borderColor:'grey'
},
warning_button: {
height:70,
backgroundColor: '#efeff0',
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}
});
export default App;
Related
Good afternoon everyone, I am developing an app in React native, I put the library react-native-maps to show some fixed maps in a scrollview, in android I show the coordinates with the marker but in the map moves when I try do the scroll
I'm trying with staticmap, but where I would have to leave the map in ios I'm left blank.
import React, {Component} from 'react'
import {View, Text, TouchableOpacity, Platform, Image} from 'react-native'
import MapApp from './MapApp'
const staticMapURL = 'https://maps.googleapis.com/maps/api/staticmap'
class PropertyListCard extends Component {
renderMap(){
if(Platform.OS == 'ios'){
console.log(Platform.OS)
return(
<View
style={{
width: 500,
height:500,
backgroundColor: 'red'
}}
>
<Image
source={{uri: "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=MyGoogleKey"}}
style={{
width: 200,
height: 200
}}
/>
</View>
)
}else{
return(
<MapApp />
)
}
}
render(){
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.data.direction}
</Text>
</View>
<View style={styles.mapContainer}>
{this.renderMap()}
</View>
<TouchableOpacity
style={styles.btn}
onPress={()=>{}}
>
<Text
style={styles.btnText}
>
Ver Vecinos
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = {
container: {
flex:1,
backgroundColor: '#fff',
margin: 10,
borderRadius: 10
},
titleContainer:{
height: 40,
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: 'grey'
},
titleText: {
paddingLeft: 20,
fontSize: 17,
fontWeight: 'bold'
},
mapContainer:{
width: '100%',
height: 200
},
btn:{
height: 50,
width: '100%',
backgroundColor: '#008591',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
btnText: {
color: '#fff',
fontSize: 17,
fontWeight: 'bold',
}
}
export default PropertyListCard
there is no support for litemode on ios
https://github.com/react-community/react-native-maps/issues/1411#issuecomment-310380854
Hi while uploading the picture from iPhone using react-native-fs in my react-native app. I am getting below error.
How to fix this above issue.
I fixed the above issue by adding this captureTarget={Camera.constants.CaptureTarget.disk} line of code in my file.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Camera from 'react-native-camera';
import RNFS from 'react-native-fs';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.titlebar}>
<Text style={styles.title}>Welcome {this.props.navigation.getParam('FirstName', '')}</Text>
</View>
<Camera
ref={(cam) => {
this.camera = cam;
}}
type={'front'}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
captureQuality={Camera.constants.CaptureQuality.low}
captureTarget={Camera.constants.CaptureTarget.disk}
>
<View>
<View style={styles.buttoncontainer}>
{
this.props.navigation.getParam('LogType', '') &&
<Text style={styles.in} onPress={this.takePicture.bind(this)}>IN</Text>
}
{!this.props.navigation.getParam('LogType', '') &&
<Text style={styles.out} onPress={this.takePicture.bind(this)}>OUT</Text>
}
</View>
</View>
</Camera>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) =>
this.ServiceCall(data)
)
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
},
title: {
flex: 1,
alignSelf: 'center',
fontSize: 30,
color: 'black',
backgroundColor: 'white'
},
titlebar: {
flexDirection: 'row',
backgroundColor: 'white',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 5
},
buttoncontainer: {
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
in: {
fontSize: 30,
backgroundColor: 'green',
marginBottom: 20,
padding: 20,
color: 'white',
borderRadius: 10,
textAlign: 'center'
},
out: {
fontSize: 30,
padding: 20,
backgroundColor: 'red',
marginBottom: 20,
color: 'white',
borderRadius: 10,
textAlign: 'center'
},
});
strong text
I'm Trying to input a value using TextInput but the keyboard is blocking the view. I configured KeyboardAvoidingView with padding so the elements are pushed up when the keyboard is active but my input field is still getting blocked entirely by the keyboard. I tried creating a parent view for the entire render method and wrapped my child views with KeyboardAvoidingView however this did not work either. Screenshots show the behavior.
Tested on iOS Emulator.
return (
<KeyboardAvoidingView behavior='padding'>
<View>
<View style={styles.container}>
<View style={styles.header}>
{jsonData}
<TouchableHighlight
underlayColor='transparent'
style={styles.btn}
onPress={this.goToAcibtnTwo}>
<Image source={images.prredbtn}></Image>
</TouchableHighlight>
<Text style={styles.textthingsmall}>{'Must be Paid Immediately'}</Text>
{jsonData2}
<TouchableHighlight
underlayColor='transparent'
style={styles.btn}
onPress={this.goToAcibtnTwo}>
<Image source={images.prgreenbtn}></Image>
</TouchableHighlight>
<Text style={styles.textthingsmall}>{'May include next payment or other fees'}</Text>
{jsonData3}
<TouchableHighlight
underlayColor='transparent'
style={styles.btn}
onPress={this.goToAcibtnTwo}>
<Image source={images.prgreenbtn}></Image>
</TouchableHighlight>
{jsonData4}
<View
style={{
flexDirection: 'row',
paddingBottom: 15
}}>
<TouchableHighlight
underlayColor='transparent'
style={styles.btn}
onPress={this.goToAcibtnTwo}>
<Image source={images.prgreenbtn}></Image>
</TouchableHighlight>
<TextInput
style={{
borderColor: 'white',
borderWidth: 2,
height: 40,
width: 100,
fontSize: 17,
marginLeft: 60,
justifyContent: 'center',
alignSelf: 'center',
color: 'white'
}}
keyboardType='numeric'
placeholder='0.00'
returnKeyType="done"
maxLength={10}
placeholderTextColor='ghostwhite'
onChangeText={(valueMoney) => this.setState({valueMoney})}
value={this.state.valueMoney}
onEndEditing={this.formatedMoneyEnd}/>
</View>
</View>
<View>
<Image style={styles.btmicons} source={images.optionsroundbtn}/>
</View>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
export default Profile;
Here's the CSS
header: {
alignSelf: 'center',
height: window.height * 0.7,
backgroundColor: '#0450A1',
width: 400
},
bottom: {
alignSelf: 'center',
width: 400
},
btmicons: {
flexDirection: 'column'
},
headerthing: {
flex: 1,
alignItems: 'center',
paddingTop: 10
},
textthing: {
alignSelf: 'flex-start',
paddingLeft: 35,
fontFamily: 'SFProText-Regular',
fontSize: 17,
color: '#FFFFFF',
flexDirection: 'row'
},
textthingsmall: {
alignSelf: 'flex-start',
paddingLeft: 35,
fontFamily: 'SFProText-Regular',
fontSize: 12,
paddingTop: 3,
color: '#FFFFFF',
flexDirection: 'row'
},
numberthing: {
alignSelf: 'flex-end',
paddingRight: 10,
fontFamily: 'SFProText-Regular',
fontSize: 35,
color: '#FFFFFF'
},
headerthing2: {
alignItems: 'center',
flex: 1,
padding: 1
},
separator: {
alignSelf: 'center'
},
btn: {
alignSelf: 'flex-start',
paddingLeft: 35,
marginBottom: 0,
paddingBottom: 0
},
headerthing3: {
alignItems: 'center',
flex: 1,
flexDirection: 'row'
},
rowLabelnum: {
fontFamily: 'PTSans-Regular',
fontSize: 24,
color: '#FFFFFF'
},
rowLabelnummain: {
fontFamily: 'PTSans-Regular',
fontSize: 36,
color: '#FFFFFF',
alignSelf: 'center'
},
rowLabelText: {
fontFamily: 'PTSans-Bold',
fontSize: 24,
color: '#FFFFFF'
},
rowLabelTextmain: {
fontFamily: 'PTSans-Bold',
fontSize: 30,
color: '#FFFFFF'
},
rowLabelnumbtn: {
fontFamily: 'PTSans-Regular',
fontSize: 20,
color: '#252525'
},
rowLabelTextbtn: {
fontFamily: 'PTSans-Bold',
fontSize: 25,
color: '#252525'
},
separate: {
alignSelf: 'center',
justifyContent: 'center',
width: 2,
height: 100,
backgroundColor: '#FFFFFF',
marginBottom: 20
},
content: {
flexDirection: 'row',
alignSelf: 'center',
justifyContent: 'center',
width: 357,
height: 2,
backgroundColor: '#FFFFFF',
marginBottom: 30
},
rectangleTop: {
marginTop: 80,
padding: 2
},
rectangleText: {
flex: 1,
flexDirection: 'row'
},
rectangleleft: {
flexDirection: 'row',
alignSelf: 'center',
justifyContent: 'center'
},
keyboardview: {
justifyContent: 'center',
paddingHorizontal: 20,
paddingTop: 20
}
I gave you a suggestion in the comment, but here, I am going to give you a demo that shows how to use KeyboardAvoidingView.
<KeyboardAvoidingView behavior="padding" style={styles.bottomcontainer}>
<View style={styles.mobilecontainer}>
<Text style={styles.getmovingtext}>Get ready with BitFamily</Text>
<View style={styles.mobilenumbercontainer}>
<PhoneInput
ref='phone'
onChangePhoneNumber={(text)=> this.setState({phoneNumber:text})}
onPressFlag={this.onPressFlag}
textProps={{placeholder: 'Enter mobile number',autoFocus:false,}}>
</PhoneInput>
<CountryPicker
ref='countryPicker'
onChange={(value)=> this.selectCountry(value)}
translation='eng'
cca2={this.state.cca2}
>
<View></View>
</CountryPicker>
<View style={styles.horizontalLine}/>
<View style={styles.buttoncontainer}>
<Text style={styles.verifytext} onPress={()=>this.callApi()}>Get confirmation code Now.</Text>
</View>
<View style={styles.socialcontainer}>
<Text style={styles.verifytext} onPress={()=>this.gotoSocoalLogin()}>Or Connect using your social account.</Text>
</View>
</View>
</View>
</KeyboardAvoidingView>
I am trying to get a hang of React Native, but for some reason, I can't get the button to centre horizontally in view container.
export default class LoginScreen extends Component {
static navigationOptions = {
header: null,
}
render() {
return (
<View style={styles.container}>
<MKTextField
tintColor={config.colors.accent}
floatingLabelEnabled={true}
autoFocus={true}
textInputStyle={{color: config.colors.primary, height: 32}}
placeholder="Login"
style={styles.loginInput}
onTextChange={(text) => this.setState({text})} />
<MKButton
style={styles.button}
shadowRadius={2}
shadowOffset={{width:0, height:2}}
shadowOpacity={.7}
shadowColor="black"
onPress={() => {
console.log('hi, raised button!');
}}>
<Text pointerEvents="none"
style={{color: 'white', fontWeight: 'bold', alignSelf:'center'}}>
Login
</Text>
</MKButton>
</View>
);
}
}
const styles = StyleSheet.create({
loginInput: {
width: '100%'
},
logo: {
height: '25%'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
paddingLeft: 16,
paddingRight: 16
},
button: {
backgroundColor: config.colors.primary,
borderWidth: 0,
height: 40,
justifyContent: 'center',
alignItems: 'center',
}
});
And here's what it looks like:
Can't really tell whats going haywire here!
In your style, you need to change alignItems to alignSelf
button: {
backgroundColor: config.colors.primary,
borderWidth: 0,
height: 40,
justifyContent: 'center',
alignSelf: 'center',
}
I'm using react-native latest release 0.4.4 and installed react-native-side-menu and react-native-carousel components.
For some reason when I run the app, it's not showing anything.
The code instantiate a view with sidemenu and contentview inside.
contentview is for displaying the main page which contains three buttons and when someone clicks on explore it takes them to search page using navigatorios component.
Is there is some problem with StyleSheet ?
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Component,
NavigatorIOS,
View,
TouchableHighlight,
TextInput,
} = React;
var SideMenu = require('react-native-side-menu');
var Menu = React.createClass({
about: function() {
this.props.menuActions.close();
},
render: function() {
return (
<View>
<Text>Menu</Text>
<Text onPress={this.about}>About</Text>
</View>
);
}
});
var styles = StyleSheet.create({
searchView: {
flexDirection: 'row',
padding: 25,
marginTop: 100,
},
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
flowRight: {
flexDirection: 'column',
padding: 25,
alignItems: 'center',
alignSelf: 'stretch',
marginTop: 100,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#009D6E',
borderColor: '#008C5D',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
});
class Search extends Component {
render() {
return (
<View style={styles.searchView}>
<TextInput
style={{ flex: 2, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Search Appointment" />
<TextInput
style={{ flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Location" />
</View>
);
}
}
class Welcome extends React.Component {
onExplorePressed() {
this.props.navigator.push({
title: 'Explore',
component: Search,
});
}
render() {
return (
<View style={styles.flowRight}>
<Text style={styles.welcome}>
Welcome to Docit!
</Text>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Facebook</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Email</Text>
</TouchableHighlight>
<Text style={styles.welcome}>OR</Text>
<TouchableHighlight
onPress={this.onExplorePressed.bind(this)}
style={styles.button}
underlayColor='#009D3E'>
<Text style={styles.buttonText}>Explore Something</Text>
</TouchableHighlight>
</View>
);
}
}
class ContentView extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: Welcome,
title: 'Welcome',
}}/>
)
}
}
var Docit = React.createClass({
render: function() {
var menu = <Menu navigator={navigator}/>;
return (
<SideMenu menu={menu}>
<ContentView/>
</SideMenu>
);
}
});
AppRegistry.registerComponent('Something', () => Something);
Am I doing something wrong here ??
I figured out that react-native-carousel component was conflicting with sidebar menu component and showing a blank screen. I posted the issue on their repository.
The simple solution is remove react-native-carousel component from everywhere, even from node_modules/, the folder inside.
Your react versions could be out of sync. I've had this happen to me when the react version bundled with the iOS app is different than the version that the packager is running.
If you're using cocoapods, make sure that the react version in your podfile is the same as your package.json.