Step 1: Create bank project
npx create-expo-app --template blank
Step 2: Install Depependencies
- Open
package.json
- Find the
dependencies section
- Type
rndeps to insert depependencies
npm install
Step 3: Create the folder structure
- Create file 📄
create_folder.bat in root folder
- Open file and using snippet
rnpft
- Open
cmd in root 📁
- Run
create_folder.bat
Bash
@echo off
mkdir src
cd src
mkdir services
mkdir redux
mkdir redux\slices
mkdir screens
echo "" > services\api.js
echo "" > redux\store.js
echo "" > redux\slices\index.js
echo "" > screens\Screen_01.js
Result:
src/
├── services/
│ └── api.js
├── redux/
│ ├── store.js
│ └── slices/
│ └── index.js
└── screens/
└── Screen_XX.js
App.jsx
app.json
index.js
package.json
assets/
Main Snippet
Table of Contents
- Create Redux Slice with Async Thunk (
rtkslices)
- Redux Store Configuration (
rtkstore)
- Axios API Service (
axs)
- React Native App with Navigation and Redux (
rnnavigationrtk)
- React Native Image from URI (
imguri)
- React Native Image from Required Source (
imgrq)
- React Navigation Hook (
navto)
- React Native Redux CRUD Screen (
rncrud)
- React Native Input Form (
rniform)
- React Native Search Bar (
rnsearch)
- React Native Form (
rnform)
- React Native Card Item Renderer (
rncard)
- React Native Grid FlatList (
rngrid)
- Create Dispatch (
dispatch)
- Create Selector (
selector)
- React Native Dependencies Setup (
rndeps)
Create Redux Slice with Async Thunk (rtkslices)
This snippet helps you create a Redux slice with async thunks for fetching, creating, editing, and deleting data using Redux Toolkit.
Usage
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import apiService from "../../services/api";
export const fetchData = createAsyncThunk(
"slice/fetchData",
async (_, { rejectWithValue }) => {
try {
const response = await apiService.get("/api/endpoint");
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Create, Edit and Delete Thunks Go Here...
const sliceSlice = createSlice({
name: "slice",
initialState: {
data: null,
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchData.fulfilled, (state, action) => {
state.loading = false;
state.data = action.payload;
})
.addCase(fetchData.rejected, (state, action) => {
state.loading = false;
state.error = action.payload || action.error.message;
});
// Handle other thunks...
},
});
export default sliceSlice.reducer;
Redux Store Configuration (rtkstore)
Configure the Redux store using Redux Toolkit.
Usage
import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import exampleReducer from "./exampleSlice";
const rootReducer = combineReducers({
example: exampleReducer,
});
export const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
Axios API Service (axs)
Set up Axios for making HTTP requests.
Usage
import axios from "axios";
const BASE_URL = "YOUR_API_URL_HERE";
const api = axios.create({
baseURL: BASE_URL,
timeout: 10000,
headers: {
"Content-Type": "application/json",
},
});
export const apiService = {
get: (url, config = {}) => api.get(url, config),
post: (url, data, config = {}) => api.post(url, data, config),
put: (url, data, config = {}) => api.put(url, data, config),
delete: (url, config = {}) => api.delete(url, config),
};
export default apiService;
React Native App with Navigation and Redux (rnnavigationrtk)
Set up a React Native app with React Navigation and Redux.
Usage
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { Provider } from "react-redux";
import { store } from "./src/redux/store";
import Screen_01 from "./src/screens/Screen_01";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Screen_01"
component={Screen_01}
options={{ title: "Screen 01" }}
/>
{/* Add other screens here */}
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
};
export default App;
React Native Image from URI (imguri)
Create an Image component with a URI source in React Native.
Usage
<Image
style={styles.image}
source={{
uri: "https://example.com/image.png",
}}
/>
React Native Image from Required Source (imgrq)
Create an Image component with a local source in React Native.
Usage
<Image style={styles.image} source={require("./assets/image.png")} />
React Navigation Hook (navto)
Navigate to another screen using React Navigation hooks.
Usage
import { useNavigation } from "@react-navigation/native";
const navigation = useNavigation();
navigation.navigate("ScreenName", { id });
React Native Redux CRUD Screen (rncrud)
A React Native screen template with Redux CRUD operations.
Usage
import React, { useEffect } from "react";
import { View, Text, Button } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import {
fetchData,
createData,
editData,
deleteData,
} from "../redux/thunks/dataThunks";
const Screen_01 = () => {
const dispatch = useDispatch();
const { data, loading, error } = useSelector((state) => state.slice);
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
const handleCreate = () => {
const newData = { task: "New Task" };
dispatch(createData(newData));
};
const handleEdit = (id) => {
const updatedData = { id, task: "Updated Task" };
dispatch(editData(updatedData));
};
const handleDelete = (id) => {
dispatch(deleteData(id));
};
if (loading) return <Text>Loading...</Text>;
if (error) return <Text>Error: {error}</Text>;
return (
<View>
<Text>Data List</Text>
{data &&
data.map((item) => (
<View key={item.id}>
<Text>{item.task}</Text>
<Button title="Edit" onPress={() => handleEdit(item.id)} />
<Button title="Delete" onPress={() => handleDelete(item.id)} />
</View>
))}
<Button title="Create New Data" onPress={handleCreate} />
</View>
);
};
export default Screen_01;
Usage
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: "#000",
borderRadius: 8,
outline: "none",
flex: 1,
}}
placeholder="${2:Enter text}"
/>
React Native Search Bar (rnsearch)
Usage
<View
style={{
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderColor: '#000',
borderWidth: 1,
gap: 8,
alignItems: 'center',
width: '100%',
}}
>
<Text style={{ flex: 1 }}>${1:Search text}</Text>
<TouchableOpacity
style={{
paddingHorizontal: 8,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
onPress={${3:() => console.log('Search pressed')}}
>
<Text style={{ color: '#fff' }}>${2:Search}</Text>
</TouchableOpacity>
</View>
Usage
<View
style={{
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderColor: '#000',
borderWidth: 1,
gap: 8,
alignItems: 'center',
width: '100%',
}}
>
<TextInput
style={{
paddingHorizontal: 12,
paddingVertical: 6,
borderWidth: 1,
borderColor: '#000',
borderRadius: 8,
outline: 'none',
flex: 1,
}}
placeholder="${1:Enter text}"
onChangeText={${3:(text) => console.log(text)}}
/>
<TouchableOpacity
style={{
paddingHorizontal: 8,
paddingVertical: 6,
backgroundColor: 'blue',
borderRadius: 8,
}}
onPress={${4:() => console.log('Button pressed')}}
>
<Text style={{ color: '#fff' }}>${2:Button}</Text>
</TouchableOpacity>
</View>
React Native Card Item Renderer (rncard)
Usage
const RenderItem = ({ item }) => {
return (
<View
style={{
marginBottom: 20,
padding: 10,
backgroundColor: "#f9f9f9",
borderRadius: 10,
alignItems: "center",
}}
>
<Image
source={{ uri: item.imageUrl }}
style={{ width: 300, height: 200, borderRadius: 8 }}
/>
<Text style={{ marginTop: 10, fontSize: 16, fontWeight: "bold" }}>
{item.title}
</Text>
</View>
);
};
React Native Grid FlatList (rngrid)
Usage
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <RenderItem item={item} />}
numColumns={2}
columnWrapperStyle={{ justifyContent: "space-between" }} // Using if numColumns >= 2
contentContainerStyle={{ padding: 16 }}
showsVerticalScrollIndicator={false}
/>
Create Dispatch (dispatch)
Usage
const dispatch = useDispatch();
Create Selector (selector)
Usage
const selector = useSelector((state) => state.yourReducer);
React Native Dependencies Setup (rndeps)
Usage
"@expo/metro-runtime": "~4.0.0",
"@react-navigation/native": "^7.0.13",
"@react-navigation/native-stack": "^7.1.14",
"@reduxjs/toolkit": "^2.4.0",
"axios": "^1.7.9",
"expo": "~52.0.17",
"expo-status-bar": "~2.0.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.3",
"react-native-web": "~0.19.13",
"react-redux": "^9.1.2",
"react-native-screens": "~4.1.0",
"react-native-safe-area-context": "4.12.0"
