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.

Blur doesn't work correctly on Android #react-native-community/blur

On Android elements wrapped in BlurVIew don't positioning right.
It works on iOS devices fine. But on Android, elements wrapped in <BlurView>{children}</BlurView> run into each other. Screenshot is below
Sometimes when I change something in styles in dev mode, it works correctly, but when I build apk, bug appears again.
How can I fix it on Android?
Code
const BottomNavigationTabs: React.FC<BottomTabBarProps> = ({
descriptors,
state,
navigation,
}) => {
const focusedOptions = descriptors[state.routes[state.index].key].options;
return (
<>
<BlurView blurType="light"
blurAmount={15} style={{ height: 85, width: '100%', position: 'absolute', bottom: 0, }}>
<View style={{ display: 'flex', flexDirection: 'row', position: 'absolute', bottom: 0, justifyContent: 'space-between' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const focusedColor = isFocused ? colors.text1 : colorsOld.black;
//Weird snippet, to render passed icon just call function with any return value, then just set color
const icon =
options.tabBarIcon &&
React.cloneElement(
//#ts-ignore
options.tabBarIcon((props: any) => props),
{ color: focusedColor }
);
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: "tabLongPress",
target: route.key,
});
};
const tabBtn = (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
style={styles.tabButton}
onLongPress={onLongPress}
activeOpacity={0.7}
key={route.key}
>
<View style={styles.tabItem}>
<View style={styles.tabItemIcon}>{icon}</View>
<Text style={{ ...styles.tabItemLabel, color: focusedColor }}>
{label}
</Text>
</View>
</TouchableOpacity>
);
return tabBtn;
})}
</View>
</BlurView>
</>
);
};
const styles = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
paddingTop: 9,
paddingBottom: 15,
},
tabButton: {
paddingTop: 8,
paddingBottom: 15,
paddingHorizontal: 10,
borderRadius: 10,
zIndex: 10000
},
tabsContainer: {
backgroundColor: colors.secondaryBg(0.5),
width: "100%",
left: 0,
bottom: 0,
zIndex: 999,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
},
tabItem: {
justifyContent: "center",
alignItems: "center",
},
tabItemIcon: {
marginBottom: 6,
},
tabItemLabel: {
fontSize: 12,
fontFamily: "Inter-Medium",
},
});

Found a solution here https://github.com/Kureev/react-native-blur/issues/483#issuecomment-1199210714.
Solution is to not set to <BlurView> position: absolute and to not wrapping anything with it. In my case looks like:
import React from "react";
import {
Text,
View,
ImageBackground,
TouchableOpacity,
StyleSheet,
} from "react-native";
import { BlurView } from "#react-native-community/blur";
import { BottomTabBarProps } from "#react-navigation/bottom-tabs";
import colorsOld from "src/theme/colorsOld";
import colors from "src/theme/colors";
const BottomNavigationTabs: React.FC<BottomTabBarProps> = ({
descriptors,
state,
navigation,
}) => {
const focusedOptions = descriptors[state.routes[state.index].key].options;
return (
<View
style={{
display: "flex",
flexDirection: "row",
backgroundColor: colors.secondaryBg(0.5),
position: "absolute",
bottom: 0,
justifyContent: "space-between",
}}
>
<BlurView
blurType="light"
blurAmount={15}
style={{ height: 85, width: "100%", bottom: 0 }}
/>
<View style={styles.tabsContainer}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const focusedColor = isFocused ? colors.text1 : colorsOld.black;
//Weird snippet, to render passed icon just call function with any return value, then just set color
const icon =
options.tabBarIcon &&
React.cloneElement(
//#ts-ignore
options.tabBarIcon((props: any) => props),
{ color: focusedColor }
);
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: "tabLongPress",
target: route.key,
});
};
const tabBtn = (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
style={styles.tabButton}
onLongPress={onLongPress}
activeOpacity={0.7}
key={route.key}
>
<View style={styles.tabItem}>
<View style={styles.tabItemIcon}>{icon}</View>
<Text style={{ ...styles.tabItemLabel, color: focusedColor }}>
{label}
</Text>
</View>
</TouchableOpacity>
);
return tabBtn;
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
paddingTop: 9,
paddingBottom: 15,
},
tabButton: {
paddingTop: 8,
paddingBottom: 15,
paddingHorizontal: 10,
borderRadius: 10,
zIndex: 10000,
},
tabsContainer: {
width: "100%",
left: 0,
bottom: 0,
zIndex: 999,
position: 'absolute',
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
},
tabItem: {
justifyContent: "center",
alignItems: "center",
},
tabItemIcon: {
marginBottom: 6,
},
tabItemLabel: {
fontSize: 12,
fontFamily: "Inter-Medium",
},
});
export default BottomNavigationTabs;

(React-Native) Item in Flatlist do not shows the correct style as in Stylesheet on the first load

I am trying to create a view with a top card showing an image and a bottom card showing relative information in a horizontal flatlist.
The style gets broken on the first load and as soon as I refresh the code without any change, the component shows the correct style as expected.
This is happening after I migrated the react native from 0.60.5 to 0.61.0.
This is the code for component.
<View
accessible={Platform.OS === 'ios' ? false : true}
style={styles.container}>
<View style={styles.itemContainer}>
<View style={styles.topContainer}>
<ImageBackground
source={{uri: item.img, cache: 'default'}}
resizeMode="contain"
imageStyle={{borderRadius: 4}}
style={styles.topContainer}>
</ImageBackground>
<View style={styles.bottomContainer}>
<Text style={styles.destination}>{item.title}</Text>
<Text style={styles.subtitle}>{item.description}</Text>
</View>
</View>
</View>
</View>
This is the stylesheet.
import {StyleSheet, Platform} from 'react-native';
import Color from '../../../../utilities/Color';
import {BaseStyle} from '../../../../utilities/Style';
const flex1 = {
flex: 1,
};
const flexRow = {
flexDirection: 'row',
};
const centerView = {
justifyContent: 'center',
alignItems: 'center',
};
const cardStyle = {
...Platform.select({
ios: {
borderWidth: 1,
borderColor: Color.white,
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.2,
shadowRadius: 2,
borderRadius: 2,
shadowColor: 'rgba(0, 0, 0, 1.0)',
},
android: {
elevation: 2,
borderRadius: 2,
},
}),
};
export default StyleSheet.create({
container: {
...flex1,
padding: 16,
borderBottomWidth: 1,
borderColor: '#efefef',
},
title: {
...BaseStyle.font16RobotoBoldGray,
},
subtitle: {
...BaseStyle.textSubHead1,
top: 10,
marginRight: 10,
color: Color.lightTextGray,
},
});
export const ItemStyle = StyleSheet.create({
container: {
...flex1,
marginBottom: 15,
},
itemContainer: {
height: 210,
width: 260,
marginRight: 15,
},
topContainer: {
height: 162,
borderRadius: 4,
},
bottomContainer: {
...cardStyle,
position: 'absolute',
left: 0,
right: 0,
top: 120,
marginHorizontal: 8,
paddingHorizontal: 15,
paddingVertical: 12,
borderRadius: 4,
backgroundColor: Color.white,
},
destination: {
...BaseStyle.textTitle,
fontSize: 14,
lineHeight: 18,
color: Color.darkGray,
marginBottom: 8,
},
subHeading: {
marginBottom: 4,
},
caption: {
...BaseStyle.textCaption,
color: Color.lightTextGray,
},
subtitle: {
...BaseStyle.textSubHead1,
},
});
This is the image at the first load
This is the image after I refresh the code.
Please suggest a way, how can I debug it. Or something wrong I am doing in my stylesheet?

Removing all the borderRadius solved it.

Why isn't my box shadow showing on Android?

I'm quite new to React Native and React in general, and I'm stuck on this particular problem:
I followed some tutorials and other answers on other posts there on StackOverflow, but I can't manage to see the border Shadow I set on these "cards". The shadow isn't displayed on my phone.
I hope so of you old wizards of the internet can help me find a solution to this problem, I'd be really grateful.
export class Boss extends Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
hp: props.hp,
ap: props.ap,
};
}
render(){
return(
<View style={styles.cardContainer}>
<View style={[styles.cardBackground , this.state.hp > 0 ?
{ backgroundColor: 'gold' }
: { backgroundColor: 'red' }]}>
<View style={styles.cardFrame}>
<Text style={styles.cardName}>{this.props.name}</Text>
<View style={styles.bossLifeWrapper}>
<Button title={'+'} onPress={this.incrementeHP}></Button>
<Text style={styles.bossHP}>{this.state.hp}</Text>
<Button title={'-'} onPress={this.decrementeHP}></Button>
</View>
<Text style={styles.bossAP}>{this.state.ap}</Text>
<Text style={styles.bossPowerLabel}>{this.props.passive}</Text>
<View style={styles.cardTextBox}>
<Text style={styles.bossPowerLabel}>Pouvoir: {this.props.powerLabel}</Text>
<Text style={styles.bossEnrageLabel}>Enrage: {this.props.enrageLabel}</Text>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
cardContainer: {
width: '80%',
height: 450,
backgroundColor: "#171314",
alignItems:"center",
borderStyle: "solid",
borderColor: "black",
borderWidth: 1,
margin: '10%',
borderRadius: 10,
padding: 10,
shadowColor: "white",
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.44,
shadowRadius: 10.32,
elevation: 16,
},
cardBackground: {
backgroundColor: '#171314',
borderRadius: 5,
padding: 10,
zIndex: 0
},
cardFrame: {
zIndex: 1,
position: 'relative',
height: '98%',
maxWidth: '97%',
left: '1%',
top: '0.5%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'white'
},
cardName: {
flex: 1,
backgroundColor: 'red',
alignItems:"center",
borderStyle: "solid",
borderBottomColor: "grey",
borderBottomWidth: 5,
margin: 5,
marginHorizontal: 5,
fontSize: 20,
height: 10
},
bossHP: {
width: '100%',
color: 'blue'
},
bossAP: {
width: '100%',
color: 'red'
},
bossLifeWrapper: {
flex: 1,
flexDirection: "column"
},
});

have you tried elevate in box styles? ex: elevate:10,

React Native: Is there a way to detect document border and change the overlay colour if document inside a frame by using react native camera?

I am a newbie to react-native. I am currently trying to implement the code which can scan and capture image for an ID card. Basically i am able to take image and save to gallery by using react native camera, but i have no idea how to detect the ID card border. I am seeking help which can guide me about the card border detection or some open source library that can implement such function.
Basically, I have already tried to implement react-native-documentscanner-android and rn-doc-scanner-android library. But react-native-documentscanner-android library i failed to implement and the rn-doc-scanner-android is without card border detection function.
Here is my code:
import React, {Component} from 'react';
import { RNCamera } from 'react-native-camera';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import {
Colors
} from 'react-native/Libraries/NewAppScreen';
import Dimensions from 'Dimensions';
import CameraRoll from "#react-native-community/cameraroll";
export default class App extends Component {
constructor(props){
super(props)
}
state = {
barcodes: [],
}
render(){
const { height, width } = Dimensions.get('window');
const maskRowHeight = Math.round((height - 500) / 20);
const maskColWidth = (width - 300) / 2;
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={{
flex: 1,
width: '100%',
justifyContent: "center"
}}
>
<View style={styles.maskOutter}>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
<View style={[{ flex: 30 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner} />
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
</View>
</RNCamera>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center', backgroundColor: '#2E8B57', margin: 5}}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> SNAP </Text>
</TouchableOpacity>
</View>
</View>
);
}
takePicture = async() => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
ToastAndroid.show(data.uri, ToastAndroid.LONG);
if(data.uri!= null){
console.log('not null')
}else{
console.log('null')
}
CameraRoll.saveToCameraRoll(data.uri);
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#2E8B57",
overflow: 'hidden',
//width: 350,
//height: 150,
},
camera: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
maskOutter: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-around',
},
maskInner: {
width: 300,
//height: 300,
backgroundColor: 'transparent',
borderColor: '#DC143C',
borderWidth: 1,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6)',
},
maskRow: {
width: '100%',
},
maskCenter: { flexDirection: 'row' },
});