রিঅ্যাক্ট নেটিভ চিটশিট

import React from 'react';
import { Text, View } from 'react-native';
 
const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>হ্যালো, রিঅ্যাক্ট নেটিভ!</Text>
    </View>
  );
};
 
export default App;

import React from 'react';
import { Text, View } from 'react-native';
 
const MyComponent = () => (
  <View>
    <Text>এটি একটি কম্পোনেন্ট</Text>
  </View>
);

const Greeting = ({ name }) => (
  <Text>হ্যালো, {name}!</Text>
);
 
<Greeting name="রহিম" />

<Text style={{ color: 'blue', fontSize: 20 }}>নীল টেক্সট</Text>

import { StyleSheet, Text, View } from 'react-native';
 
const App = () => (
  <View style={styles.container}>
    <Text style={styles.text}>স্টাইল করা টেক্সট</Text>
  </View>
);
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  text: { fontSize: 18, color: 'green' },
});

import { TextInput, Button } from 'react-native';
 
const Form = () => {
  const [text, setText] = React.useState('');
  return (
    <>
      <TextInput value={text} onChangeText={setText} placeholder="টাইপ করুন" />
      <Button title="জমা দিন" onPress={() => alert(text)} />
    </>
  );
};

import { Image } from 'react-native';
 
const MyImage = () => (
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    style={{ width: 200, height: 200 }}
  />
);

import React, { useState } from 'react';
import { Text, Button } from 'react-native';
 
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <Text>গণনা: {count}</Text>
      <Button title="বাড়ান" onPress={() => setCount(count + 1)} />
    </>
  );
};

import React, { useEffect } from 'react';
import { Text } from 'react-native';
 
const Timer = () => {
  const [time, setTime] = React.useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer); // ক্লিনআপ
  }, []);
 
  return <Text>সময়: {time} সেকেন্ড</Text>;
};

const inputRef = useRef();
<TextInput ref={inputRef} />;
inputRef.current.focus();

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 
const Stack = createStackNavigator();
 
const HomeScreen = () => <Text>হোম</Text>;
const DetailsScreen = () => <Text>বিস্তারিত</Text>;
 
const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

const HomeScreen = ({ navigation }) => (
  <Button title="বিস্তারিত দেখুন" onPress={() => navigation.navigate('Details')} />
);

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>১</Text>
  <Text>২</Text>
</View>

import { useEffect, useState } from 'react';
import { Text } from 'react-native';
 
const DataFetcher = () => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);
 
  return <Text>{data ? data.message : 'লোড হচ্ছে...'}</Text>;
};

import { Alert } from 'react-native';
 
Alert.alert('শিরোনাম', 'বার্তা', [
  { text: 'ঠিক আছে', onPress: () => console.log('OK') },
]);

import { Animated, Button } from 'react-native';
 
const FadeInView = () => {
  const fadeAnim = React.useRef(new Animated.Value(0)).current;
 
  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };
 
  return (
    <>
      <Animated.View style={{ opacity: fadeAnim }}>
        <Text>ফেইড ইন</Text>
      </Animated.View>
      <Button title="শুরু" onPress={fadeIn} />
    </>
  );
};

import Icon from 'react-native-vector-icons/FontAwesome';
 
<Icon name="star" size={30} color="gold" />;

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
 
// রিডিউসার
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};
 
// স্টোর
const store = createStore(counterReducer);
 
// কম্পোনেন্ট
const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
 
  return (
    <>
      <Text>গণনা: {count}</Text>
      <Button title="বাড়ান" onPress={() => dispatch({ type: 'INCREMENT' })} />
    </>
  );
};
 
// অ্যাপ
const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
 
const TodoApp = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
 
  const addTask = () => {
    if (task) {
      setTasks([...tasks, { id: Date.now(), text: task }]);
      setTask('');
    }
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>টুডু লিস্ট</Text>
      <TextInput
        style={styles.input}
        value={task}
        onChangeText={setTask}
        placeholder="নতুন কাজ লিখুন"
      />
      <Button title="যোগ করুন" onPress={addTask} />
      <FlatList
        data={tasks}
        renderItem={({ item }) => <Text style={styles.task}>{item.text}</Text>}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10 },
  task: { padding: 10, backgroundColor: 'white', marginVertical: 5 },
});
 
export default TodoApp;