I have encountered a problem. ScrollView is cut off at the bottom of the screen on both Android and iOS. It's "unscrollable". My code is rather simple:
<View style={{ flex: 1 }}>
<ScrollView style={styles.container}>
<Image
style={styles.image}
source={{ uri: constants.media_url + "/" + data.img }}
/>
<Text style={styles.title}>{data.heading}</Text>
<Text style={styles.published_date}>{data.published_date}</Text>
<Text style={styles.introduction}>
{stripHTML(data.introduction)}
</Text>
<RenderHtml contentWidth={width} source={source} />
</ScrollView>
</View>
const styles = StyleSheet.create({
container: {
backgroundColor: colors.background,
padding: 10,
flex: 1,
},
image: {
width: "100%",
maxHeight: 270,
height: "100%",
},
title: {
fontSize: 24,
marginTop: 20,
fontWeight: "bold",
},
introduction: {
fontWeight: "bold",
},
text: {
fontWeight: "normal",
marginTop: 13,
},
published_date: {
color: colors.gray,
marginVertical: 10,
},
});
As you can see I have used flex tricks, I've also tried padding, everything. It just doesn't work. I use only two libraries in my project: "react-native-render-html": "^6.3.4", and React Navigation.
Thank you!
So, after hours of searching and trying, literally, I have done it.
<View style={{ flex: 1 }}>
<ScrollView
style={styles.container}
contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }}
>
<Image
style={styles.image}
source={{ uri: constants.media_url + "/" + data.img }}
/>
<Text style={styles.title}>{data.heading}</Text>
<Text style={styles.published_date}>{data.published_date}</Text>
<Text style={styles.introduction}>
{stripHTML(data.introduction)}
</Text>
<RenderHtml contentWidth={width} source={source} />
</ScrollView>
</View>
What I changed is I added contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }} to my ScrollView component. For me 300 worked, maybe you can change according to your needs.
Related
I'm having incredible difficulty figuring out why my stylesheet isn't working the way that I want it to -- I want both the icon [note the comments] as well as the button on the bottom to appear centered, but both currently appear left-aligned. Would be grateful for any + all direction.
Here are my imports:
import { useNavigation } from '#react-navigation/native';
import React from 'react';
import {
Text,
SafeAreaView,
ScrollView,
View,
TouchableOpacity,
ActivityIndicator,
Alert
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { firebase } from '../../../../firebase/config';
import styles from './styles';
import DateTimePicker from '#react-native-community/datetimepicker';
import { Sae } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { FontAwesome } from '#expo/vector-icons'
Here is the code returned from my class component:
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.inputContainer}>
<View>
<Text style={styles.title}>Create An Event</Text>
</View>
<Sae
style={{marginLeft: 10, marginRight: 10, marginBottom: 10}}
labelStyle={{color: '#656565'}}
label={'Event Name'}
iconClass={FontAwesomeIcon}
iconName={'calendar-check-o'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<Sae
style={{marginLeft: 10, marginRight: 10}}
labelStyle={{color: '#656565'}}
inputStyle={{fontSize: 16}}
label={'Event Description'}
iconClass={FontAwesomeIcon}
iconName={'pencil'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<View style={styles.break1}></View>
<View style={styles.break2}><FontAwesome name='circle' color='#e6a80c'/></View> //would like this icon to be centered
<View style={styles.break3}></View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Date </Text>
<DateTimePicker
testID='datePicker'
value={this.state.date}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Select a date'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Start Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventStartTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Start time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>End Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventEndTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChangeEventEndTime}
placeholder='End time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Guests' Votes Due By </Text>
<DateTimePicker
testID='datePicker'
value={this.state.votingDeadline}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChangeVotingDeadline}
placeholder='Votes Due By'
style={{ marginHorizontal: 10 }}
/>
</View>
</View>
<View style={styles.buttonContainer}> //would like this button to appear centered also
<TouchableOpacity
style={styles.button}
onPress={() => this.storeEvent()}
>
<Text style={styles.Btn}>Create Event</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
And here is the stylesheet:
export default StyleSheet.create({
container: {
backgroundColor: '#ffffff',
flex: 1,
justifyContent: 'center'
},
inputContainer: {
padding: 10
},
indInputContainer: {
margin: 8
},
break1: {
marginBottom: 20,
marginTop: 20
},
break2: {
alignContent: 'center',
justifyContent: 'center'
},
break3: {
marginTop: 10,
marginBottom: 10
},
text: {
fontSize: 16,
color: '#656565',
},
preferences: {
fontWeight: 'bold',
fontSize: 20,
margin: 5,
},
title: {
padding: 5,
fontSize: 16,
fontWeight: 'bold',
color: '#e95530'
},
buttonContainer: {
justifyContent: 'center',
alignContent: 'center'
},
button: {
backgroundColor: '#e95531',
margin: 10,
marginTop: 20,
height: 48,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
width: 275,
},
Btn: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
preloader: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
Would be super grateful for some help. Thank you!
Iam creating a react native project in which am displaying multiple views in a row and after certain width, it needs to go to next line ! But its not going, how to do that ?
Actual Output:
word1 word-word2 word-word-word3 word-word-word4
Expected Outpu:
word1 word-word2 word-word-word3
word-word-word4
This is my code:
<View style={{ flexDirection :'row', marginHorizontal: 10, paddingTop: 7,
paddingBottom: 7, width: 150 }}>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
This is my expo "Check this"
Please suggest !
Give parent View of Text components flexWrap:"wrap" style:
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
Full Example:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: '#eff3f8' }}>
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Working App : Expo Snack
I wanted to know please what is the correct way so that the keyboard does not be on the text input but is should be below it?
I created a text box but every time I try to write something then the keyboard covers my text box and I can not see what I am writing there.
I would be happy to help solve the problem
function E_BitsuaDigdum() {
const [selectedValue3, setSelectedValue3] = useState('1');
const [value2, onChangeText] = React.useState('');
return (
<View
style={{
flex: 1,
backgroundColor: '#cbced4',
}}
>
<View
style={{
flexDirection: 'column',
paddingTop: 20,
}}
>
<Text style={styles.label}>סיבת אי ביצוע:</Text>
<View
style={{
width: 200,
borderWidth: 2,
borderRadius: 5,
backgroundColor: 'white',
left: 15,
}}
>
<Picker
mode="dropdown"
selectedValue={selectedValue3}
style={{
placeholderTextColor: 'black',
height: 50,
width: 200,
right: -10,
transform: [{ scaleY: 1.2 }, { scaleX: 1.2 }],
}}
onValueChange={(itemValue, itemIndex) =>
setSelectedValue3(itemValue)
}
>
<Picker.Item label="מתקן סגור" value="1" />
<Picker.Item label="אין קליטה" value="2" />
<Picker.Item label="תקלה במכשיר" value="3" />
</Picker>
</View>
</View>
<View
style={{
top: 20,
alignSelf: 'center',
backgroundColor: '#275d9f',
height: 50,
width: 400,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
}}
>
<Text style={styles.Notice}>הערות אי ביצוע</Text>
</View>
<KeyboardAvoidingView
behaviour="position"
style={styles.container}
enabled
>
<TextInput
style={{
top: 20,
alignSelf: 'center',
height: 200,
width: 400,
backgroundColor: 'white',
borderWidth: 2,
borderRadius: 5,
fontSize: 18,
}}
placeholder="כתוב כאן.."
onChangeText={(text) => onChangeText(text)}
value={value2}
/>
</KeyboardAvoidingView>
<View style={styles.AreasPrototypesBottomView}>
<View style={styles.BottleView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('אופן הדיגום', { item });
}}
>
<Image
source={require('../assets/bottle.png')}
style={{ height: 40, width: 40 }}
/>
</TouchableOpacity>
</View>
<View style={styles.NoteView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('פרטים כלליים');
}}
>
<Image
source={require('../assets/note2.png')}
style={{ height: 35, width: 35 }}
/>
</TouchableOpacity>
</View>
<View style={styles.SendView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('');
}}
>
<Image
source={require('../assets/send.png')}
style={{ height: 45, width: 45 }}
/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
You can use KeyboardingAvoidingView for scrolling up the Keyboard
https://reactnative.dev/docs/keyboardavoidingview
Here's an example
import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard } from 'react-native';
const KeyboardAvoidingComponent = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
inner: {
padding: 24,
flex: 1,
justifyContent: "space-around"
},
header: {
fontSize: 36,
marginBottom: 48
},
textInput: {
height: 40,
borderColor: "#000000",
borderBottomWidth: 1,
marginBottom: 36
},
btnContainer: {
backgroundColor: "white",
marginTop: 12
}
});
export default KeyboardAvoidingComponent;
When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?
This is how I am using the FlatList:
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
This is from the FriendItem's return
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles for FriendItem:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
I also tried removing the TouchableOpacity but it made no difference.
What you can try. is below :
UPDATE:
<Flatlist
bounces={false}/>
try this here, or add bounces={false} in the top scrollView if its there
Hope it helps. feel free for doubts
This issue happened because of some times you have given a width to the parent view of flat list. like below.
<View style={{width: '90%'}}>
<FlatList/>
</View>
simply add the flatlist to the same width with bounces false.
<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>
by adding bounces=false, your flatlist will not be able drag to different directions.
problem trying to make fit the image over some text which is like 2/3rd of the screen here's the link of image http://imgur.com/tuJPGqT
layout is designed like
<View style={styles.container} maintainAspectRatio={true} source={logotwo}>
<Container > <Image source={logo} maintainAspectRatio={true} style={styles.logo}>
</Image>
<View >
<Content >
<Text style={styles.boldtext}>SOME TITLE</Text>
<Text style={styles.subtext} adjustsFontSizeToFit={true} numberOfLines={3}>
A str agfdgdfgfdgfsdgsfdggdgfg(some long sentence) nance.</Text>
<View>
<Button style={styles.button}
onPress={() => { this._signIn() } }>
<Text style={{ fontSize: 20, color: '#fff' }}>
LOGIN
</Text>
</Button>
</View>
</Content>
</View>
</Container >
</View>
and style for the same is
container: {
resizeMode: 'cover', height: null,
backgroundColor: '#ffffff',
},
logo: {
width: null,
height: 398,
resizeMode: 'stretch',
},
boldtext: {
textAlign: 'center',
fontSize: 23,
fontWeight: 'bold',
}
,
subtext: {
marginLeft: 10,
marginRight: 10,
opacity: 0.7,
textAlign: 'center',
},
button: {
marginTop: 20,
alignSelf: 'stretch',
height: 70,
fontSize: 50,
}
i tried adjusting the width and height manually but resolution is not matched up with various screens i tested on.
Please suggest some good standard to follow the same for all screens in my app.