Question 34505 in React native Question posted in
The official React Native documentation can be found here.

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:

enter image description here

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>
    </>
  );
};
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>)}
    Login or Signup to reply.
  3. 0

    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,
  },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search