Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add redux #417

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

add redux #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab447b1
add redux
mickeypause Sep 30, 2024
cc87770
fix: revert some indentation changes
dannyhw Nov 3, 2024
c03c8df
Merge remote-tracking branch 'upstream/main' into pr/mickeypause/417
dannyhw Nov 3, 2024
5cc6cfd
add to analytics
dannyhw Nov 3, 2024
d8605df
add redux support for nativewindui
dannyhw Nov 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thin-wolves-push.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-expo-stack': minor
---

add redux
22 changes: 20 additions & 2 deletions cli/src/commands/create-expo-stack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,14 @@ const command: GluegunCommand = {
cliResults.packages.push({ name: 'vexo-analytics', type: 'analytics' });
}

if (options.redux) {
// Add redux package
cliResults.packages.push({
name: 'redux',
type: 'state-management'
});
}

// By this point, all cliResults should be set
info('');
highlight('Your project configuration:');
Expand Down Expand Up @@ -354,6 +362,13 @@ const command: GluegunCommand = {
script += '--drawer+tabs ';
}
}

const stateManagementPackage = cliResults.packages.find((p) => p.type === 'state-management');

if (stateManagementPackage) {
// currently only redux is supported
script += `--${stateManagementPackage.name} `;
}
} else {
// Add the packages
cliResults.packages.forEach((p) => {
Expand Down Expand Up @@ -407,6 +422,7 @@ const command: GluegunCommand = {
const stylingPackage = packages.find((p) => p.type === 'styling');
const internalizationPackage = packages.find((p) => p.type === 'internationalization');
const analyticsPackage = packages.find((p) => p.type === 'analytics');
const stateManagementPackage = packages.find((p) => p.type === 'state-management') || undefined;

let files: string[] = [];

Expand All @@ -418,7 +434,8 @@ const command: GluegunCommand = {
analyticsPackage,
toolbox,
cliResults,
internalizationPackage
internalizationPackage,
stateManagementPackage
);

// Once all the files are defined, format and generate them
Expand All @@ -434,7 +451,8 @@ const command: GluegunCommand = {
packageManager,
stylingPackage,
toolbox,
internalizationPackage
internalizationPackage,
stateManagementPackage
);

await printOutput(cliResults, formattedFiles, toolbox, stylingPackage);
Expand Down
52 changes: 38 additions & 14 deletions cli/src/templates/base/App.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { ScreenContent } from 'components/ScreenContent';
import { StatusBar } from 'expo-status-bar';
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>

<% if (props.internalizationPackage?.name === "i18next") { %>
import './translation';
Expand Down Expand Up @@ -28,15 +32,23 @@ import { StatusBar } from 'expo-status-bar';
vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
<% } %>



<% if (props.stylingPackage?.name === "restyle") {%>
export default function App() {
return (
<ThemeProvider theme={theme}>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% } %>
</ScreenContent>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</ThemeProvider>
);
Expand All @@ -45,13 +57,19 @@ import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<TamaguiProvider config={config}>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% } else { %>
<Text>Open up App.tsx to start working on your app!</Text>
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% } else { %>
<Text>Open up App.tsx to start working on your app!</Text>
<% } %>
</ScreenContent>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</TamaguiProvider>
);
Expand All @@ -60,11 +78,17 @@ import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% } %>
</ScreenContent>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</>
);
Expand Down
5 changes: 5 additions & 0 deletions cli/src/templates/base/package.json.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@
"vexo-analytics": "^1.3.15",
<% } %>

<% if (props.stateManagementPackage?.name === "redux") { %>
"react-redux": "^9.1.2",
"@reduxjs/toolkit": "^2.2.7",
<% } %>

<% if ((props.navigationPackage?.name === "react-navigation") && (props.stylingPackage?.name === "tamagui")) { %>
"expo-splash-screen": "~0.27.4",
<% } %>
Expand Down
19 changes: 15 additions & 4 deletions cli/src/templates/packages/expo-router/drawer/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ import { Stack } from 'expo-router';

vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>


export const unstable_settings = {
// Ensure that reloading on `/modal` keeps a back button present.
Expand Down Expand Up @@ -65,10 +70,16 @@ export default function RootLayout() {
<ThemeProvider theme={theme}>
<% } %>
<GestureHandlerRootView style={{ flex: 1 }}>
<Stack>
<Stack.Screen name="(drawer)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
</Stack>
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<Stack>
<Stack.Screen name="(drawer)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
</Stack>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</GestureHandlerRootView>
<% if (props.stylingPackage?.name === "tamagui") { %>
</TamaguiProvider>
Expand Down
13 changes: 12 additions & 1 deletion cli/src/templates/packages/expo-router/stack/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ import '../unistyles';

vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>


export default function Layout() {

Expand All @@ -51,7 +56,13 @@ export default function Layout() {
<% } else if (props.stylingPackage?.name === "restyle") { %>
<ThemeProvider theme={theme}>
<% } %>
<Stack />
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<Stack />
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
<% if (props.stylingPackage?.name === "tamagui") { %>
</TamaguiProvider>
<% } else if (props.stylingPackage?.name === "restyle") { %>
Expand Down
19 changes: 15 additions & 4 deletions cli/src/templates/packages/expo-router/tabs/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ import '../unistyles';

vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>


export const unstable_settings = {
// Ensure that reloading on `/modal` keeps a back button present.
Expand Down Expand Up @@ -61,10 +66,16 @@ export default function RootLayout() {
<% } else if (props.stylingPackage?.name === "restyle") { %>
<ThemeProvider theme={theme}>
<% } %>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
</Stack>
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
</Stack>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
<% if (props.stylingPackage?.name === "tamagui") { %>
</TamaguiProvider>
<% } else if (props.stylingPackage?.name === "restyle") { %>
Expand Down
11 changes: 11 additions & 0 deletions cli/src/templates/packages/nativewindui/drawer/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import '../global.css';
import 'expo-dev-client';
import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
<% } %>
Expand Down Expand Up @@ -34,6 +38,10 @@ export default function RootLayout() {
/>
{/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
{/* <ExampleProvider> */}

<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
Expand All @@ -54,6 +62,9 @@ export default function RootLayout() {
</BottomSheetModalProvider>
</GestureHandlerRootView>
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
{/* </ExampleProvider> */}
</>
);
Expand Down
10 changes: 10 additions & 0 deletions cli/src/templates/packages/nativewindui/stack/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import '../global.css';
import 'expo-dev-client';
import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
import { Icon } from '@roninoss/icons';
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
<% } %>
Expand Down Expand Up @@ -37,6 +41,9 @@ export default function RootLayout() {
/>
{/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
{/* <ExampleProvider> */}
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
Expand All @@ -57,6 +64,9 @@ export default function RootLayout() {
</BottomSheetModalProvider>
</GestureHandlerRootView>
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
{/* </ExampleProvider> */}
</>
);
Expand Down
10 changes: 10 additions & 0 deletions cli/src/templates/packages/nativewindui/tabs/app/_layout.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import '../global.css';
import 'expo-dev-client';
import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
import { Icon } from '@roninoss/icons';
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
<% } %>
Expand Down Expand Up @@ -37,6 +41,9 @@ export default function RootLayout() {
/>
{/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
{/* <ExampleProvider> */}
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
Expand All @@ -56,6 +63,9 @@ export default function RootLayout() {
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
</BottomSheetModalProvider>
</GestureHandlerRootView>
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
{/* </ExampleProvider> */}
</>
Expand Down
30 changes: 27 additions & 3 deletions cli/src/templates/packages/react-navigation/App.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ import "react-native-gesture-handler";
<% } else { %>
import RootStack from "./navigation";
<% } %>
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>

export default function App() {
<% if (props.stylingPackage?.name === "tamagui") { %>
Expand All @@ -54,16 +58,36 @@ export default function App() {

return (
<TamaguiProvider config={config}>
<RootStack />
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<RootStack />
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</TamaguiProvider>
);
<% } else if (props.stylingPackage?.name === "restyle") { %>
return (
<ThemeProvider theme={theme}>
<RootStack />
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<RootStack />
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
</ThemeProvider>
);
<% } else { %>
return <RootStack />;
return (
<% if (props.stateManagementPackage?.name === "redux") { %>
<Provider store={store}>
<% } %>
<RootStack />
<% if (props.stateManagementPackage?.name === "redux") { %>
</Provider>
<% } %>
);
<% } %>
}
Loading