[[oktatas:telefon:react_native|< React Native]]

====== React Native - Színátmenet ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Telepítés =====

  npx expo install expo-linear-gradient

vagy:
  yarn add react-native-linear-gradient

vagy:
  npm install react-native-linear-gradient


===== Használat =====

<code javascript>
import LinearGradient from 'react-native-linear-gradient';


<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} 
     style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Belépés
  </Text>
</LinearGradient>


var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});
</code>

===== Másik példa =====

<code javascript App.java>
import { LinearGradient } from 'expo-linear-gradient';
import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['#ff8a00', '#e52d27']}
        style={styles.background}
      />

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  background: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: '100%',
  },
});
</code>


===== Linkek =====

  * https://docs.expo.dev/versions/latest/sdk/linear-gradient/ (2024)
  * https://github.com/react-native-linear-gradient/react-native-linear-gradient (2024)
  * https://www.npmjs.com/package/react-native-linear-gradient?activeTab=readme (2024)
  * https://www.npmjs.com/package/react-native-gradients (2024)