Develop Reference

How do I make my FlatList scrollable while sibling Modal is visible?

My FlatList is not scrollable while my Modal is visible. I've tried a bunch of things but none seem to do the job. I'm building for Android. You can find the Expo snack here https://snack.expo.dev/#ordis45/modal_flatlist?platform=android. Code is as follows:
Any pointers in the right direction would be appreciated!
const styles = StyleSheet.create({
container: {
flex: 1,
},
modal: {
position: 'relative',
bottom: 0,
height: 20,
},
modalContent: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'rgba(0, 0, 0, 0.1)',
},
openButton: {
backgroundColor: '#F194FF',
borderRadius: 20,
padding: 10,
elevation: 2,
position: 'absolute',
bottom: 20,
right: 20,
},
});
const myComp = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container} overflow='scroll'>
<Modal
visible={modalVisible}
style={styles.modal}
transparent={true}
>
<View style={styles.modalContent}>
<Text>This is a modal</Text>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text>Close</Text>
</TouchableOpacity>
</View>
</Modal>
<FlatList
style={{height: 300, position: 'relative', elevation: 1}}
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
renderItem={({ item }) => <Text style={{padding: 50}}>{item}</Text>}
/>
<TouchableOpacity onPress={() => setModalVisible(true)} style={styles.openButton}>
<Text>Open</Text>
</TouchableOpacity>
</View>
);
};
I tried things like changing the elevation and z-indices of the View component and the FlatList and Modal components- to no avail. I also tried setting supportedOrientations={['landscape']} but that didn't work either.

React Native Vertical Delivery Progress Bar

How can I put a Vertical progress bar on React Native
I need to make a delivery bar progress
**Example: driver is at point A and needs to go to point B ...*

This is a bit tricky but do able. You will have to have a vertical line and place the items horizontally in a row format.
Lets say you have a data structure like this.You can update the current location using the flag and set the labels.
const data = [
{ title: 'Stop 1', letter: 'A', isCurrent: false },
{ title: 'Stop 2', letter: 'B', isCurrent: false },
{ title: 'Stop 3', letter: 'C', isCurrent: false },
{ title: 'Stop 4', letter: 'D', isCurrent: true },
{ title: 'Stop 5', letter: 'E', isCurrent: false },
];
This will be your component which handle the map
const MapProgress = (props) => {
if (!props.data || props.data.lenght === 0) return null;
const firstItem = props.data.shift();
return (
<View style={{ flex: 1 }}>
<View style={styles.verticalLine}></View>
<View style={styles.verticalWrap}>
<View style={styles.itemWrap}>
<View style={styles.firstPoint}></View>
<View style={{ marginLeft: 5, flex: 1 }}>
<Text>{firstItem.title}</Text>
</View>
</View>
{props.data.map((item) => (
<View style={styles.itemWrap}>
<View style={styles.pointWrap}>
<Text
style={[
styles.markerText,
item.isCurrent ? styles.currentMarker : null,
]}>
{item.letter}
</Text>
</View>
<View style={{ marginLeft: 5, flex: 1 }}>
<Text style={item.isCurrent ? styles.currentMarker : null}>
{item.title}
</Text>
</View>
</View>
))}
</View>
</View>
);
};
These will have to be styled to place the views properly
const styles = StyleSheet.create({
verticalLine: {
backgroundColor: 'black',
width: 2,
height: '95%',
position: 'absolute',
marginLeft: 35,
marginTop: 20,
},
verticalWrap: {
justifyContent: 'space-between',
height: '100%',
},
itemWrap: {
width: 200,
height: 40,
borderWidth: 1,
marginLeft: 20,
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
},
pointWrap: {
backgroundColor: 'black',
height: 20,
width: 20,
marginLeft: 5,
alignItems: 'center',
},
firstPoint: {
backgroundColor: 'black',
borderRadius: 20,
height: 10,
width: 10,
marginLeft: 10,
},
markerText: { color: 'white' },
currentMarker: { color: 'green' },
});
You can use the component like this
<MapProgress data={data} />
You can tryout the snack below
https://snack.expo.io/#guruparan/mapprogress

You better try this lib: https://github.com/oblador/react-native-progress#progressbar
Or you can create a your custom progressbar, it pretty simple in React Native. You could try
<View style={{height: 50, width: '100%', flexDirection: 'row'}}>
<View style={{height: '100%', flex: this.state.currentProgress, backgroundColor: "blue"}}/>
<View style={{height: '100%', flex: 100 - this.state.currentProgress, backgroundColor: "grey"}}/>
</View>
I think that it.

For vertical progress bar. You cane use
react-native-progress npm and simply rotate the bar using style transform property.
import React from 'react';
import * as Progress from 'react-native-progress';
return <Progress progress={progress} style={{ transform: [{ rotate: '-90deg' }] }} />;
Please refer original answer:
https://github.com/oblador/react-native-progress/issues/61#issuecomment-322694271

React native keyboard's height changes entire view

My layout with two inputs and a button works well without the keyboard. But as soon as I clicked the input box the keyboard appears and changes the height of the screen. Then things align wrong . I already tried using keyboard avoiding view. But the error is still there.
import {
StyleSheet,
Text,
View,
TextInput,
Button,
KeyboardAvoidingView,
} from 'react-native';
import { Formik} from 'formik';
import React, { Component } from 'react';
class Demo extends Component {
render(){
return (
<KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
<View style={styles.container}>
<Text style={styles.titleText}>Profile settings</Text>
<View style={styles.card}>
<Formik
initialValues={{
name: '',
mobile: '',
}}
onSubmit={(values) => {
console.log(JSON.stringify(values));
}}>
{(props) => (
<View>
<TextInput
placeholder={'name'}
onChangeText={props.handleChange('name')}
value={props.values.name}
style={styles.cardTextSmall}
/>
<TextInput
placeholder={'email'}
onChangeText={props.handleChange('mobile')}
value={props.values.mobile}
style={styles.cardTextSmall}
/>
<Button
title={'submit'}
/>
</View>
)}
</Formik>
<View style={styles.centerButton}></View>
</View>
</View>
</KeyboardAvoidingView>
);
};
}
const styles = StyleSheet.create({
centerButton: {
top: '1%',
alignContent: 'center',
alignItems: 'center',
},
titleText: {
fontFamily: 'Segoe UI',
fontSize: 30,
position: 'relative',
left: '7%',
top: 72,
},
cardContent: {
paddingHorizontal: '10%',
marginHorizontal: 10,
},
cardTextLarge: {
paddingTop: '15%',
fontSize: 18,
color: '#A6A6A6',
fontFamily: 'Segoe UI',
},
cardTextSmall: {
borderBottomColor: 'black',
borderBottomWidth: 1,
fontFamily: 'Segoe UI',
fontSize: 18,
color: '#404040',
},
cardTextModule: {
paddingLeft: '15%',
paddingTop: '2%',
fontFamily: 'Segoe UI',
fontSize: 18,
width: '100%',
color: '#404040',
},
card: {
borderRadius: 6,
backgroundColor: 'red',
shadowOpacity: 0.3,
shadowOffset: {width: 1, height: 1},
marginHorizontal: 4,
left: '6.5%',
top: '19%',
height: '78%',
width: '85%',
margin: 'auto',
position: 'relative',
zIndex: -1,
},
});
export default Demo;
I'm a beginner here. If you could please give me some explanation. thanks!

This is happening because you have used KeyboardAvoidingView with one of the behavior as padding. So whenever you click on TextInput it adds bottom padding to the view and view moves towards the top.
If you don't want it to happen, use View tag instead of KeyboardAvoidingView.

Flatlist rows overlap the elements of other rows on element transform

I have a flatlist which contains some list of images (Inside touchableopacity) and on each image focus i'm scaling the image to 1.3. Here the next row is always overlapping the first row image when scaled.
<FlatList
style={[styles.flatlist, styles.outline]}
decelerationRate="fast"
data={this.props.posters}
contentContainerStyle={{
flexDirection: 'column',
paddingTop: perfectSize(50),
paddingLeft: perfectSize(40),
paddingRight: perfectSize(40),
paddingBottom: perfectSize(50),
}}
numColumns={7}
horizontal={false}
ref={ref => (this.scroller = ref)}
scrollEventThrottle={400}
renderItem={({item, index}) => (
<Poster
key={index + 1}
defaultFocus={this.state.posterNum}
onFocus={this.handleAccessible}
handleClick={this._onPosterClick}
onLayout={this.handleScroller}
data={item}
index={index + 1}
/>
)}
keyExtractor={item => item.id}
/>
Poster component code is below
<TouchableHighlight
ref={itemRef => {
this.refers[`${each.id}_${i}_pos`] = itemRef;
}}
accessible={true}
hasTVPreferredFocus={defaultFocus}
style={[styles.poster_box_small]}
onFocus={() => this._onPosterFocus(`${each.id}_${i}`, i)}
onPress={() => this._onPosterClick(each, i)}
onBlur={() => this._onPosterBlur(`${each.id}_${i}`)}>
<LinearGradient
colors={['#BF55DE', '#080808', '#00BDE6']}
start={{x: 0, y: 1}}
end={{x: 1, y: 0}}
ref={itemRef => (this.refers[`${each.id}_${i}_lg`] = itemRef)}>
{/* Poster :: Background Image */}
<ImageBackground
style={styles.poster_banner}
resizeMode="cover"
source={{uri: each.image}}>
{/* Bottom Left Flag :: Collected/UnCollected score */}
{this.getScoreUI(each)}
{/* Center Dots :: Show only during file load */}
<View style={styles.poster_center_view}>
<Text style={styles.poster_center_circle}>. . .</Text>
</View>
{/* Top Right Flag :: TV Collection */}
{this.getTVFlag(each)}
</ImageBackground>
</LinearGradient>
</TouchableHighlight>
onFocus and onBlur i'm just swapping the class
// Poster Focus :: scale it and show border
_onPosterFocus = (key, i) => {
this.props.onFocus && this.props.onFocus(i);
this.refers[`${key}_pos`].setNativeProps({
style: styles.poster_box_large,
});
this.refers[`${key}_lg`].setNativeProps({
style: styles.poster_gradient_large,
});
};
// Poster Blur :: Remove scaling and remove border
_onPosterBlur = key => {
this.refers[`${key}_pos`].setNativeProps({style: styles.poster_box_small});
this.refers[`${key}_lg`].setNativeProps({
style: styles.poster_gradient_small,
});
};
Css of poster component
poster_gradient_large: {
padding: perfectSize(3),
},
poster_gradient_small: {
padding: perfectSize(0),
},
poster_box_small: {
width: perfectSize(235),
height: perfectSize(334),
margin: perfectSize(6),
transform: null,
zIndex: -1,
},
poster_box_large: {
width: perfectSize(235),
height: perfectSize(334),
margin: perfectSize(6),
transform: [{scale: (1.1, 1.3)}],
zIndex: 1,
},
poster_banner: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(51,50,59,1)',
zIndex: 1,
},
Problem is like this, the next row in flatlist is overlapping the scaled image but the top rows are not overlapping. This is happening for all images.

Align vertically Icon and TextInput

I am trying to align vertically TextInput with Icons and I tried various style rules, but it doesn't work. In iOS, layout is correct, but in Android elements are not aligned vertically.
<View style={styles.headerContainer}>
<TextInput
style={styles.input}
autoCorrect={false}
onChangeText={(value) => this.setState({ searchTextInputVal: value })}
returnKeyType="search"
placeholder="Type Here..."
value={this.state.searchTextInputVal}
underlineColorAndroid="transparent"
/>
<Icon
size={25}
style={[styles.icon, styles.searchIcon]}
name="search"
color={Colors.grey}
/>
<Icon
size={25}
style={[styles.icon, styles.clearIcon]}
name="close"
onPress={this.onClearTextInput.bind(this)}
color={Colors.grey}
/>
</View>
input: {
paddingLeft: 35,
paddingRight: 19,
margin: 8,
borderRadius: 3,
overflow: 'hidden',
borderColor: Colors.grey,
borderWidth: 1,
fontSize: 16,
color: Colors.darkBlue,
height: 40,
...Platform.select({
ios: {
height: 40,
},
android: {
borderWidth: 0,
},
}),
},
searchIcon: {
left: 16,
color: Colors.grey,
},
clearIcon: {
right: 16,
color: Colors.grey,
},

The TextInput component in android has by default some paddings & margins, that are added to the ones that you set in the input style. If you use Toggle Inspector option, you might see them.

I didn't notice I had another style:
icon: {
backgroundColor: 'transparent',
position: 'absolute',
color: 'white',
top: 15.5,
...Platform.select({
android: {
top: 20,
},
}),
},
When I removed:
top: 15.5,
...Platform.select({
android: {
top: 20,
},
}),
and added: justifyContent: 'center', it works now.