ScrollView cut off in React Native - javascript

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

React Native Styling & Flex -- Centering A Component

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!

React native view to next line?

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

react native : what is the correct way so that the keyboard does not be on the text input?

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;

FlatList moves/drags in all directions

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.

How to resize the image and page to fit for all android screens in react native

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.

Categories