Develop Reference

React native- ios and android box shadow

I am new to react native development. I am trying to make the design in the image below:
How can I achieve the box affect? I was trying with box shadow but I was not getting the correct look. It looks like the 'box' is indented into the screen and the cards scroll underneath it. Has anyone ever done something like this? Or can you point me in the right direction?
This is my code for my home screen:
return isLoading ? (
<LoadingComponent />
) : (
<>
<SafeAreaView style={Layout.fill}>
<View style={[Layout.alignItemsStart, Gutters.largeTMargin, Gutters.largeLMargin]}>
<Text style={common.headingTextStyle}>{welcomeUser}</Text>
<Text style={[Gutters.regularTMargin, common.subHeadingTextStyle]}>Available</Text>
</View>
<SafeAreaView
style={[
Layout.fill,
Layout.center,
// styles.jobsBox,
Gutters.regularHMargin,
Gutters.regularVMargin,
]}
>
<ScrollView
style={[
Layout.fullSize,
Gutters.regularLPadding,
Gutters.regularRPadding,
Gutters.largeBMargin,
]}
>
{_.map(jobs, (job) => (
<Job jobData={job} key={_.get(job, 'id')} />
))}
</ScrollView>
</SafeAreaView>
</SafeAreaView>
</>
);
};

Shadows in react native are tricky particularly because of android. However there are 2 great libraries that can help you with making shadows using CSS format, and cross platform. react native shadow 2 and react native drop shadow

The best library I tried is react native neomorph shadow and its cross-platform library:
import { Shadow } from 'react-native-neomorph-shadows';
...
{_.map(jobs, (job) => (<Shadow
inner // <- enable inner shadow
useArt // <- set this prop to use non-native shadow on ios
style={{
shadowOffset: {width: 10, height: 10},
shadowOpacity: 1,
shadowColor: "grey",
shadowRadius: 10,
borderRadius: 20,
backgroundColor: 'white',
width: 100,
height: 100,
// ...include most of View/Layout styles
}}
>
<Job jobData={job} key={_.get(job, 'id')} />
</Shadow>)}

Try the below shadow style-
shadow: {
borderColor: color.palette.warmGrey,
borderWidth: StyleSheet.hairlineWidth,
shadowColor: color.palette.black,
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 3,
padding: 10,
backgroundColor: color.palette.white,
},

React native paper display custom views when List accordian is expanded

Unable to display custom view as list item in react native paper List accordian . I could only figure out that it can be used for text but not for custom components or custom views. Can anyone let me know if this can be done using react native paper or should i move to some other npm package.

You can display custom view like this
<List.Accordion
title="Accordion"
left={(props) => <List.Icon {...props} icon="folder" />}>
<TextInput style={{height:100}} placeholder={'enter text...'}/>
</List.Accordion>

You can use custom png icon
const arrowRight = require('../assets/Img/Icons/arrowRight.png')
const arrowDown = require('../assets/Img/Icons/arrowDown.png')
<List.AccordionGroup>
<List.Accordion
right={(props) => <Image style={styles.accordIcon} source={props.isExpanded ? arrowDown : arrowRight} />}
title={quickLinks.title}
id={quickLinks.id}
>
<View style={styles.quickLinkTextWrap}>
<Text>{quickLinks.description}</Text>
</View>
</List.Accordion>
</List.AccordionGroup>
accordIcon: {
width: 12,
height: 12,
resizeMode: 'contain',
tintColor: "#000"
},

React native Expo Custom font android issue

I tried using a custom font Avenir-book.tff and AvernirNext.otf for my expo project. For some reason my custom font works in my iOS device but doesn't work for my android device. Here my code:
app.js:
UNSAFE_componentWillMount() {
Font.loadAsync({
"Avenir-Book": require("./assets/fonts/Avenir-Book.ttf"),
"Avenir-Next": require("./assets/fonts/AvenirNextLTPro-Bold.otf"),
}).then(() => this.setState({ fontsLoaded: true }));
}
my text:
<Text style={styles.text}>ORA</Text>
Style sheet:
text: {
color: colors.white,
fontSize: 30,
fontFamily: "Avenir-Book",
fontWeight: "bold",
marginTop: 8,
},
I tried using both the fonts. Both works perfectly fine on iOS but doesn't work at all on android. Does anyone know why?

I think this answer is relevant: https://stackoverflow.com/a/62460424/659988
Be sure to refer to this minimal and complete working example in the documentation too: https://docs.expo.io/guides/using-custom-fonts/#a-minimal-but-complete-working-example

What is common thing to handle for ios and android platform in react-native?

I've been building react-native for android at beginning and never been into IOS as I don't have project that use IOS at that moment and I don't own IOS or MacOS. And I'm clueless of what is difference between IOS and Android in general. I'm currently need to develop my app to be able to use by both Android and IOS.
What are the common things that need to be handle? To be exact, check for Platform. From maestral-solutions, it shows on stylesheet that the header height and margin top:-
const styles = StyleSheet.create({
header: {
height: Platform.OS === 'android' ? 76 : 100,
marginTop: Platform.OS === 'ios' ? 0 : 24,
...Platform.select({
ios: { backgroundColor: '#f00', paddingTop: 24},
android: { backgroundColor: '#00f'}
}),
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: '#fff',
fontSize: 24
}
});
Is there any other common things to handle for IOS platform? Like status bar or tab navigation or icon?

You can use SafeAreaView instead of View for wrap.
for example:
render() {
return (
<SafeAreaView>
<View style={{backgroundColor: 'red'}} />
</SafeAreaView>
);
}
If you wrap with View then the header will cutted when you are using iPhoneX since iPhoneX has different UI with others.
And also there are some other things different in style.
In iOS you should add overflow: 'hidden' for borderRadius. Means, you can only use borderRadius in Android but you can see the circular border after add overflow: 'hidden'. And I think the backgroundColor will works in Text component in Android but not in iOS.
Then you should care about Alert.alert in iOS. in Android you can normally use Alert and setState in the same time. But if you use Alert and setState in the same time then alert disappear right after show. For break down this you can use like this.
setTimeout(() => {
Alert.alert('info', 'Testing');
}, 100);
this.setState({spinner: false});
You can check this will works well in iOS too.

Image overrides backgroundColor of elements after upgrade to react-native 0.61.0

I have very strange problem after upgrade react-native library in my app from version 0.59.9 to 0.61.0. The problem occurred only on Android (simulators and device).
Firstly, I should mention that the problem has not occurred since the first turn on the application. The most often appear after logging to app. After processing the data, the rendering of elements in the application unexpectedly changes.
The problem looks like:
As you can see, the image overrides backgroundColor, but strangely it does not cover the inscription inside. Have any of you encountered such a problem? How to solve it? What can it be caused by?
I put the code snippet below. Once again, I emphasize: The problem does not occur when the application is initialized, and everything worked correctly before upgrading the libraries.
const ProfileHead = () => (
<View>
<LinearGradient
colors={["rgba(3, 7, 20, 0)", "#030714"]}
style={styles.backgroundGradient}
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.0 }}
locations={[0, 1]}
/>
<Image
source={require("../../assets/images/focusly_08.jpg")}
style={styles.imageBackground}
/>
</View>
);
<MainContainer style={{ paddingTop: 0 }} navbarHidden={true}>
<StretchScroll
stretchHeight={300}
stretchComponent={<ProfileHead />}
style={styles.scroll}
>
<View style={styles.userProfile}>
<ProfileOval title={user.name ? user.name.charAt(0) : ""} />
<Header style={styles.header}>{user.name}</Header>
</View>
...
backgroundGradient: {
position: "absolute",
width: Dimensions.get("window").width,
height: 200,
zIndex: 2,
},
imageBackground: {
width: Dimensions.get("window").width,
position: "absolute",
height: 200,
},
scroll: {
zIndex: 3,
},
userProfile: {
alignItems: "center",
marginTop: 130,
},

Try upgrading to v0.61.2
According to the changelog:
This release fixes shadow issues that were happening on Android as well as improves StatusBar API to better support iOS 13 dark mode.