Function App

example/src/App.tsx:32–80

()

};

const App = () => {
  const rnVersion = pkg.dependencies['react-native'];
  // @ts-ignore
  const jsEngine = global?.HermesInternal ? 'Hermes' : 'JSC';
  // @ts-ignore
  const uiManager = global?.nativeFabricUIManager ? 'Fabric' : 'Paper';
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        backgroundColor="#ffffff00"
        barStyle={'dark-content'}
        translucent={true}
      />
      <ImageBackground
        source={require('react-native/Libraries/NewAppScreen/components/logo.png')}
        style={styles.titleContainer}
        imageStyle={styles.logo}>
        <View style={styles.badge}>
          <Text style={styles.badgeText}>
            React Native {rnVersion} ({jsEngine}; {uiManager})
          </Text>
        </View>
        <LinearGradient
          colors={['#ffffff00', '#fff']}
          locations={[0.5, 1]}
          style={styles.titleGradient}>
          <Text style={styles.titleText}>react-native-linear-gradient</Text>
        </LinearGradient>
      </ImageBackground>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <Section title="Simple Gradient">
          <SimpleGradient />
        </Section>
        <Section title="Angle Gradient">
          <AngleGradient />
        </Section>
        <Section title="Animated Gradient">
          <AnimatedGradient />
        </Section>
        <Section title="Gradient Timer">
          <GradientTimer />
        </Section>
        <Section title="Gradient Buttons">
          <GradientButtons />
        </Section>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {