wshobson/react-native-design

Que fait react-native-design ?

Maîtrisez le style, la navigation et les animations Reanimated de React Native pour le développement mobile multiplateforme. Utilisez-le lors de la création d'applications React Native, de la mise en œuvre de modèles de navigation ou de la réalisation d'animations performantes.

Aperçu

Cette compétence vous guide dans les aspects clés de React Native :

• Style : Utilisation de StyleSheet, Flexbox, et bibliothèques comme styled-components ou tailwind-rn pour des interfaces responsives et cohérentes.
• Navigation : Implémentation de React Navigation (Stack, Tab, Drawer) avec gestion des paramètres et de l'état de navigation.
• Reanimated : Création d'animations fluides et performantes sur le thread UI (animations partagées, gestes, transitions).

Installation

Assurez-vous d'avoir configuré un projet React Native (via Expo ou React Native CLI) :

# Pour React Navigation
expo install @react-navigation/native @react-navigation/stack
# Pour Reanimated
expo install react-native-reanimated

Utilisation

Style avec StyleSheet

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Bonjour, monde !</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Navigation avec React Navigation

Créez un navigateur Stack :

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Animations avec Reanimated

Exemple d'animation d'une vue avec Reanimated 2 :

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { TouchableOpacity } from 'react-native';

function AnimatedBox() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(offset.value * 100) }],
  }));

  return (
    <TouchableOpacity onPress={() => (offset.value = Math.random())}>
      <Animated.View style={[{ width: 50, height: 50, backgroundColor: 'blue' }, animatedStyles]} />
    </TouchableOpacity>
  );
}

Ressources

• Documentation React Native
• React Navigation
• Reanimated 2

Contribution

Les contributions sont les bienvenues ! Ouvrez une issue ou soumettez une pull request pour améliorer cette compétence.