How to make linear-gradient background in React-native

Question

How to crate gradient inside

<View />

https://github.com/react-native-community/react-native-linear-gradient

Answer 1

if you are using expo, i had created a separate component

you can import it in any component and use it

import { fonts } from '@src/theme/typography'
import { LinearGradient } from 'expo-linear-gradient'
import React from 'react'
import { ViewStyle, StyleProp, StyleSheet, Text } from 'react-native'


const Button = (props) => {
    const { style, text } = props
    return(
        <LinearGradient 
        colors={['#ffa700', '#ff9300']}
        style={[styles.container, style]}>
        <Text style={styles.text}>
        {text}
        </Text>
        </LinearGradient>
    )
}

const styles = StyleSheet.create({
    container: {
        height: 48,
        borderRadius: 8
    },
    text: {
        textAlign: 'center',
        marginTop: 'auto',
        marginBottom: 'auto',
        color: '#fefffe',
        fontSize: 18,
        fontFamily: fonts.medium,

    }
})

export default Button