In the below code I am facing a problem with iphone 5, the StatusBar is being covered by the SafeAreaview and if I used status bar to margin from top, that affects the iphone 6 and x which makes the margin from to larger.
componentWillMount() {
this.startHeaderHeight = 45
this.marginTopHeader = 0
if (Platform.OS == 'android') {
this.startHeaderHeight = 30 + StatusBar.currentHeight
this.marginTopHeader = 30 + this.marginTopHeader
}
}
render() {
var width = Dimensions.get('window').width - 128;
var height = Dimensions.get('window').height;
return (
<SafeAreaView style={{
height: this.startHeaderHeight, flexDirection: 'row',
borderBottomColor: '#ddd', backgroundColor: '#3A3658', marginTop: this.marginTopHeader
}} >
<Icon
lightTheme
style={{ marginLeft: 8, marginRight: 5, marginTop: 9, color: 'white' }} size={25} name="ios-menu" onPress={() => {
this.props.draw();
}} />
<View style={{position: 'absolute', right: 7}}>
<Icon style={{ color: '#fff',marginTop:11 ,padding:0,}} size={25} name="ios-cart" onPress={() => {
this.props.cart();
}}>
<Text style={{color:'red', fontWeight:'bold', fontSize:10}}>{this.props.cartItemCount}</Text>
</Icon>
</View>
</SafeAreaView >);}
Related
I am attempting to make the images scroll horizontally. I downloaded some UI, and added ScrollView horizontal. But instead of it looking the same just with the ability to scroll horizontally, it shrank the image (and also gave it the ability to scroll horizontally). What should I change to make it stretch all the way across (still with the padding)?
Posts.js
import React from "react";
import {
View,
Text,
Image,
ImagBackground,
ImageBackground,
} from "react-native";
import Icon from "#expo/vector-icons/Entypo";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
export default class Posts extends React.Component {
state = {
liked: false,
};
onLike = () => {
this.setState({ liked: !this.state.liked });
};
render() {
const { name, profile, photo, onPress } = this.props;
return (
<View>
<View
style={{
flexDirection: "row",
paddingTop: 25,
alignItems: "center",
}}
>
<View style={{ width: "20%" }}>
<Image
source={profile}
style={{
width: 45,
height: 45,
borderRadius: 13,
}}
/>
</View>
<View
style={{
width: "60%",
}}
>
<Text
style={{
fontFamily: "Bold",
fontSize: 14,
color: "#044244",
}}
>
{name}
</Text>
<Text
style={{
fontFamily: "Medium",
fontSize: 12,
color: "#9ca1a2",
}}
>
2 mins ago
</Text>
</View>
<View
style={{
width: "20%",
alignItems: "flex-end",
}}
>
<Icon name="sound-mix" color="#044244" size={20} />
</View>
</View>
<View
style={{
flexDirection: "row",
width: "100%",
paddingTop: 20,
}}
>
<ScrollView horizontal>
<ImageBackground
source={photo}
style={{
width: "100%",
height: 220,
}}
imageStyle={{
borderRadius: 30,
}}
>
<View
style={{
height: "100%",
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "flex-end",
}}
>
<TouchableOpacity
onPress={onPress}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
}}
>
<Icon name="forward" color="#044244" size={20} />
</TouchableOpacity>
<TouchableOpacity
onPress={this.onLike}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
marginLeft: 10,
marginRight: 20,
}}
>
<Icon
name={
this.state.liked === true ? "heart" : "heart-outlined"
}
color={this.state.liked === true ? "red" : "#044244"}
size={20}
/>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
</View>
</View>
);
}
}
Here's me adding more words because the post doesn't have enough words on it's own. When will they finally remove this pointless feature? I feel as if I clearly expressed my question with the few words I used.
I believe your issue is with your View wrapping your ScrollView. There is no need of wrapping ScrollView, that too in row, due to which the remaining space is visible. Just define the ScrollView, and it would work just fine. Give a width of 100% to your ScrollView though.
For any sort of styling to the parent for the ScrollView, do it inside the ScrollView itself, like the way I did in the code.
Please note ScrollView accepts a list of child items, currently I see only a single item, if you've intentionally added this one, then it is fine, else, you need to refactor your code surely. This won't work out for you.
// PLEASE NOTE --> Commented Lines should be removed, and
// only ScrollView should be considered with the styling specified
// <View
// style={{
// flexDirection: "row",
// width: "100%",
// paddingTop: 20,
// }}
// >
<ScrollView horizontal
style={{
width: '100%',
marginTop: 20,
paddingLeft: 16,
paddingRight: 6
}}>
<ImageBackground
source={photo}
style={{
width: "100%",
height: 220,
marginRight: 10
}}
imageStyle={{
borderRadius: 30,
}}
>
<View
style={{
height: "100%",
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "flex-end",
}}
>
<TouchableOpacity
onPress={onPress}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
}}
>
<Icon name="forward" color="#044244" size={20} />
</TouchableOpacity>
<TouchableOpacity
onPress={this.onLike}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
marginLeft: 10,
marginRight: 20,
}}
>
<Icon
name={
this.state.liked === true ? "heart" : "heart-outlined"
}
color={this.state.liked === true ? "red" : "#044244"}
size={20}
/>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
// </View>
in iOS, a white line will appear when pulling up the <ScrollView> with refreshControl, anyone knows the reasons?
<ScrollView
removeClippedSubviews={true}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={props.listViewState.pullToRefresh}
onRefresh={handleOnRefresh}
/>
}
contentContainerStyle={{backgroundColor: 'white'}}
>
<View> ... </View>
<View> ... </View>
</ScrollView>
white line appears
I had the same issue with Flatlist.
Try something like this.
return (
<SafeAreaView style={styles.container}>
<View style={styles.container2}/>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
contentContainerStyle={{ backgroundColor: 'white' }}
ListHeaderComponent={<View>
<Text style={{backgroundColor:'#293541'}}>HEADER</Text></View>}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={'red'}
backgroundColor={'#293541'}
/>
}
/>
</SafeAreaView>
);
and for styling :
container: {
flex:1,
marginTop: StatusBar.currentHeight || 0,
backgroundColor: 'white',
},
container2: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '60%',
backgroundColor: '#293541',
},
My code works fine on Most of iPhones but on Iphone 5 the status bar has been covered by the view, I don't know how to margin the view in Iphone 5 only if i used margin top in the view, it looks weird in other iPhones
componentWillMount() {
this.startHeaderHeight = 45
this.marginTopHeader = 0
this.iconMargin = 9
if (Platform.OS == 'android') {
this.startHeaderHeight = 30 + StatusBar.currentHeight
this.marginTopHeader = 23 + this.marginTopHeader
this.iconMargin = this.iconMargin
}
}
render() {
var width = Dimensions.get('window').width - 128;
var height = Dimensions.get('window').height;
return (
<SafeAreaView style={{
height: this.startHeaderHeight, flexDirection: 'row',
borderBottomColor: '#ddd', backgroundColor: '#3A3658', marginTop: this.marginTopHeader
}} >
<Icon
lightTheme
style={{ marginLeft: 8, marginRight: 5, marginTop: this.iconMargin, color: 'white' }} size={25} name="ios-menu" onPress={() => {
this.props.draw();
}} />
<View style={{position: 'absolute', right: 7}}>
<Icon style={{ color: '#fff',marginTop: this.iconMargin ,padding:0,}} size={25} name="ios-cart" onPress={() => {
this.props.cart();
}}>
<Text style={{color:'red', fontWeight:'bold', fontSize:10}}>{this.props.cartItemCount}</Text>
</Icon>
</View>
</SafeAreaView >
You can try to write like this.
<View style={{flex: 1, backgroundColor: 'white'}} >
{/* header */}
<View style={{paddingTop: system.ios.x ? 22 : 0}}>
<View style={{
height: Platform.select({ios: 64, android: 44}),
backgroundColor: 'white',
justifyContent: 'flex-end'
}}>
`enter code here`
</View>
</View>
</View>
I am trying to use the KeyboardAvoidingView with behavior="padding".
When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it.
I have also with KeyboardAvoidingView height property with offset. It was working few components like 2 TextInputs. But when I add all the components the UI goes insane and behave jumbled up.
Any any idea whats happening over here?
Here the link of tutorial which I have followed.
render() {
return (
<View style={styles.backgroundContainer}>
<Loader
loading={this.state.isLoading} />
<KeyboardAvoidingView
keyboardVerticalOffset={10}
style={styles.mainContainer}
behavior='padding' >
<View style={styles.formContainer}>
<View style={[styles.centerContainer, { marginTop: 40 }]}>
<Image source={require('./../../Resources/logo.png')} />
<Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}>AppName</Text>
<Text style={styles.loginMsg}> Login to your Account </Text>
</View>
<View style={styles.inputFieldsContainer}>
<Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} />
<TextInput
placeholder='Email'
returnKeyType='next'
keyboardType='email-address'
onChangeText={(value) => this.setState({ userEmail: value })}
onSubmitEditing={() => this.passwordInput.focus()}
style={styles.inputFields} />
</View>
<View style={styles.inputFieldsContainer}>
<Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} />
<TextInput
returnKeyType='go'
secureTextEntry
placeholder='Password'
ref={(input) => this.passwordInput = input}
onChangeText={(value) => this.setState({ password: value })}
style={styles.inputFields} />
</View>
<View style={styles.buttonContainer}>
<Button
fontSize='8'
color='gray'
title='Remember Me'
onPress={() => {
console.log('Remember Me Clicked');
}} />
<Button
color='gray'
title='Forgot Password?'
onPress={() => {
console.log('Forgot Password Clicked');
}} />
</View>
<TouchableOpacity
style={styles.buttonLogin}
onPress={() => {
console.log('Login Clicked');
}}
>
<Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>Login</Text>
</TouchableOpacity>
<View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}>
</View>
<View style={[styles.centerContainer, { marginBottom: 10 }]}>
<Text style={styles.loginMsg}>Don't have a Account</Text>
<TouchableOpacity
style={styles.buttonRegister}
onPress={() => navigate('Register')} >
<Text style={styles.buttonRegisterText}>REGISTER NOW</Text>
</TouchableOpacity>
</View>
</View>
<View style={{ height: 10, backgroundColor: '#628499', }}>
</View>
</KeyboardAvoidingView>
</View>
);
}
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1, backgroundColor: 'green'
},
mainContainer: {
flex: 1, margin: 25,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
backgroundColor: 'white',
justifyContent: 'space-between'
},
formContainer: {
flex: 1, paddingLeft: 25, paddingRight: 25
},
centerContainer: {
alignItems: 'center', marginBottom: 10,
},
loginMsg: {
margin: 10,
fontSize: 20, color: 'gray'
},
inputFieldsContainer: {
flexDirection: 'row', margin: 10,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
},
inputFields: {
flexGrow: 1,
marginTop: 5, marginBottom: 5,
height: 30,
backgroundColor: 'rgba(255,255,255,0.4)',
paddingHorizontal: 10,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between'
},
buttonLogin: {
alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,
backgroundColor: '#2980b9',
borderWidth: 1, borderRadius: 5, borderColor: 'gray'
},
buttonRegister: {
alignItems: 'center', height: 40,
marginLeft: 50, marginRight: 50
},
buttonRegisterText: {
fontSize: 20, fontWeight: 'bold', color: 'gray'
},
loading: {
position: 'absolute',
left: 0, right: 0, top: 0, bottom: 0,
alignItems: 'center', justifyContent: 'center'
}, });
I used KeyboardAvoidingView, it also doesn't work.
I found this solution, You can take the base code.
Installation
npm i react-native-keyboard-aware-scroll-view --save
Usage
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
You can find it here
The way it worked for me was to use position as behavior and -70 as vertical offset. Any non negative integer was creating a huge unused space when the keyboard pops up.
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === 'ios' ? 'position' : 'height'}
keyboardVerticalOffset={Platform.OS === 'ios' ? -70 : 70}
enabled>
<ScrollView>
...
</ScrollView>
</KeyboardAvoidingView>
<KeyboardAvoidingView
style={styles.mainContainer}
behavior="padding"
enabled
>
<View>.......................</View>
</KeyboardAvoidingView>
'Enabled or disabled KeyboardAvoidingView' should be add.
Keep in mind is always your top Parent with flex:1 then the child is then you text input container
<KeyboardAvoidingView style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "position" : null} enabled>
<ScrollView>
<View>
<View >
<Text maxFontSizeMultiplier={1.5} >
Sign in to your account{" "}
</Text>
<View
behavior="padding"
enabled
>
<TextInput
placeholder="Email address"
placeholderTextColor={Colors.grey}
style={styles.textInput}
onChangeText={(e) => setEmail(e.trim())}
autoCapitalize="none"
returnKeyType={"done"}
/>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
// 2nd Solutions use this package
npm i react-native-keyboard-aware-scroll-view --save
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
I recently started to develop React Native apps...
Now i'm building an iOS app...When i test the app with iOS simulator every thing is ok and when i attached my iPhone to my laptop and build and run the app directly on my iPhone i don't have any problem and my apps work...But when i detached my iPhone from laptop the app crash and i can't run it again...
I don't know what is problem...
here is my code :
import React, {Component} from "react";
import {Image, Text, View} from "react-native";
import Proximity from "react-native-proximity";
import {Card, CardSection} from "./common";
let rekatCounter = 0;
let sajdeCounter = 0;
class Main extends Component {
constructor(props) {
super(props);
this.state = {
proximity: false,
sajdeCounter: 0
};
this._proximityListener = this._proximityListener.bind(this);
}
componentDidMount() {
Proximity.addListener(this._proximityListener);
}
/**
* State of proximity sensor
* #param {object} data
*/
_proximityListener(data) {
if (data.proximity) {
sajdeCounter += 1;
this.setState({
proximity: data.proximity,
});
}
}
componentWillUpdate() {
if (sajdeCounter % 2 === 1 && sajdeCounter !== 1) {
sajdeCounter = 1;
rekatCounter += 1;
}
if (sajdeCounter === 1 && rekatCounter == 0) {
rekatCounter = 1;
}
if (rekatCounter === 5 && sajdeCounter % 2 === 1) {
sajdeCounter = 0;
rekatCounter = 0;
}
}
componentWillUnmount() {
Proximity.removeListener(this._proximityListener);
}
render() {
const resizeMode = 'cover';
return (
<Card>
<CardSection>
<View style={styles.sajdeCounterWrapper}>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={ require('../../assets/bg.jpg')}
/>
</View>
<Text style={styles.sajdeCounter}> {sajdeCounter}</Text>
</View>
<View style={styles.sajdeLabelWrapper}>
<Text style={styles.sajdeLabel}>Some string</Text>
</View>
</CardSection>
<CardSection>
<View style={styles.rekatCounterWrapper}>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={ require('../../assets/bg.jpg')}
/>
</View>
<Text style={styles.rekatCounter}>{rekatCounter}</Text>
</View>
<View style={styles.rekatLabelWrapper}>
<Text style={styles.rekatLabel}>Some string</Text>
</View>
</CardSection>
</Card>
);
}
}
const styles = {
sajdeCounterWrapper: {
flex: 3,
justifyContent: 'center',
alignItems: 'center'
},
sajdeCounter: {
fontSize: 45
},
sajdeLabelWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
sajdeLabel: {
fontSize: 45
},
rekatCounterWrapper: {
flex: 3,
justifyContent: 'center',
alignItems: 'center'
},
rekatCounter: {
fontSize: 45
},
rekatLabelWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
rekatLabel: {
fontSize: 45
}
};
export default Main;
The reason your app crashed is because it needs to be connected to the laptop.
To run your app on your phone without connecting it to the pc via cable, you need to have your phone connected to the same wifi that the laptop is connected to.