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

How to achieve full black shadow and black border in react native?

I want to make my button fully have black border and shadow heres the design how to do that? the problem is the shadow is not fully black, it still have blur effect.

enter image description here

and this is my implementation in react native

enter image description here


  socialButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    paddingVertical: 12,
    paddingHorizontal: 16,
    elevation: 2,
    shadowColor: 'rgba(0, 0, 0, 1)',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 1,
    shadowRadius: 2,
    borderRadius: 25,
    borderWidth: 1,
    borderColor: '#000',
  },
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    nvm, i solved it just placing <View> tag behind the button.

    enter image description here

    import React from 'react';
import {
  Text,
  StyleSheet,
  ActivityIndicator,
  View,
  Pressable,
} from 'react-native';
import SvgIcon from '../../../assets/google.svg';
import SvgButton from '../../../assets/Button.svg';

const AtomGoogleButton = ({onPress, loading}) => {
  return (
    <>
      <View
        style={{
          position: 'relative',
        }}>
        <Pressable onPress={onPress} style={styles.socialButton}>
          {loading ? (
            <ActivityIndicator color={'gray'} />
          ) : (
            <>
              <SvgIcon width={24} height={24} />
              <Text style={styles.socialButtonText}>Google</Text>
            </>
          )}
        </Pressable>
        <View
          style={{
            width: '100%',
            paddingVertical: 24,
            paddingHorizontal: 16,
            borderRadius: 25,
            top: 7,
            left: 2,
            backgroundColor: 'black',
            position: 'absolute',
            zIndex: 0,
          }}></View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  socialButton: {
    // position: 'relative',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    zIndex: 999,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 25,
    // elevation: 2,
    // shadowColor: 'rgba(0, 0, 0, 1)',
    // shadowOffset: {width: 0, height: 2},
    // shadowOpacity: 1,
    // shadowRadius: 2,
    borderWidth: 1.5,
    // borderColor: '#000',
  },
  socialButtonText: {
    marginLeft: 8,
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
  },
});

export default AtomGoogleButton;

  2. 0 
    <View style={{ justifyContent: "center", alignItems: "center", marginTop: 100 }}>
    <View
      style={{
        width: '90%',
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 50,
        backgroundColor: 'black',
        height: 70,
        position: "absolute",
        bottom: -6,
        right: 15
      }}>
    </View>
    <View style={{
      width: '90%',
      height: 70,
      borderRadius: 50,
      backgroundColor: '#ffffff',
      borderColor: '#000000',
      borderWidth: 2,
      alignItems: "center",
      justifyContent: "center"
    }}>
      <Text style={{ fontSize: 16, color: "grey" }}>Title...</Text>
      <Text style={{ color: "#000", fontSize: 22, fontWeight: '700' }}>Message...</Text>
    </View>
  </View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search