React Native custom button styling issue

Question

I am designing custom button in react native through TouchableOpacity. So far I have tried different styling approaches but didn't get like required design. below mentioned is my attempt to solve.

<TouchableOpacity style={styles.numericButton}>
      <View>
          <Text style={styles.numericButtonText}>1</Text>
      </View>
</TouchableOpacity>


const styles = StyleSheet.create({

    numericButton: {
        margin:10,
        padding:10,
        backgroundColor:'#D3D3D3',
        borderColor:'#000',
        borderWidth:2,
        borderRadius:5,
        elevation:10,
        shadowOffset: { width: 5, height: 5 },
        shadowColor: "black",
        shadowOpacity: 1,
        shadowRadius: 5,

    },
    numericButtonText:{
        fontSize:24,
        fontWeight:'bold',
        fontFamily:'Cochin'
    }
});

result:

I want to style my react native button like this

React Native's styling capabilities are limited enough that the only way to achieve lighting effects like that might be to use an image — Kai, Feb 06 '19 at 00:34
@kai can you recommend me any third party library that can provide such styling in react native. — Muhammad Iqbal, Feb 06 '19 at 00:40
React Native don't offer gradient. There is library for you purpose. react-native-liner-gradient https://github.com/react-native-community/react-native-linear-gradient However, I recommend to use image too. — sonicmario, Feb 06 '19 at 02:10

score 1 · Accepted Answer · answered Feb 11 '19 at 09:25

We can achieve same type of button with react-native-linear-gradient

was achieved with:

            <TouchableOpacity>
                <LinearGradient
                    // start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
                    style={styles.button}
                    locations={[0.3, 0, 0]}
                    colors={['#A8AFB5', 'white', 'white']}
                >
                     <Text style={styles.buttonText}>{props.data}</Text>
                </LinearGradient>
            </TouchableOpacity>




 const styles = StyleSheet.create({

    button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
    buttonText: {
        //textAlign:'center',
        fontSize: 24,
        fontWeight: 'bold',
        fontFamily: 'Cochin',
        color: 'black'
    }
});

score 0 · Answer 2 · edited Mar 09 '19 at 08:08

0

Use following style and use more gradient to set the colors matching the design and check the reflected changes

numericButton: {
  alignItems: 'center',
  margin: 10,
  padding: 10,
  backgroundColor: '#D3D3D3',
  borderColor: '#000',
  borderWidth: 2,
  //borderRadius:5,
  elevation: 5,
  shadowOffset: { width: 5, height: 5 },
  shadowColor: 'grey',
  shadowOpacity: 1,
  shadowRadius: 5,
},
numericButtonText: {
  fontSize: 24,
  fontWeight: 'bold',
  fontFamily: 'Cochin',
},

You're good to go!

edited Mar 09 '19 at 08:08

M.Mahdi Nabiollahi

21
8

answered Feb 07 '19 at 11:47

Akshay Mulgavkar

1,727
9
22

its same code with slight changes. Do you know, How I can make custom button with lighting effect ? – Muhammad Iqbal Feb 07 '19 at 21:31
You can use TouchableHighlight. for reference use [this](https://facebook.github.io/react-native/docs/touchablehighlight) – Akshay Mulgavkar Feb 11 '19 at 07:14

React Native custom button styling issue

2 Answers2