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 1 commit
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
15 changes: 13 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 @@ -407,6 +415,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 +427,8 @@ const command: GluegunCommand = {
analyticsPackage,
toolbox,
cliResults,
internalizationPackage
internalizationPackage,
stateManagementPackage
);

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

await printOutput(cliResults, formattedFiles, toolbox, stylingPackage);
Expand Down
131 changes: 77 additions & 54 deletions cli/src/templates/base/App.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,72 +2,95 @@ import { ScreenContent } from 'components/ScreenContent';
import { StatusBar } from 'expo-status-bar';

<% if (props.internalizationPackage?.name === "i18next") { %>
import './translation';
import { InternalizationExample } from 'components/InternalizationExample';
import './translation';
import { InternalizationExample } from 'components/InternalizationExample';
<% } %>

<% if (props.stylingPackage?.name === "nativewind") { %>
import './global.css';
import './global.css';
<% } else if (props.stylingPackage?.name === "nativewinui") { %>
import './global.css';
import 'expo-dev-client';
import './global.css';
import 'expo-dev-client';
<% } else if (props.stylingPackage?.name === "restyle") { %>
import { ThemeProvider } from '@shopify/restyle';
import { theme } from 'theme';
import { ThemeProvider } from '@shopify/restyle';
import { theme } from 'theme';
<% } else if (props.stylingPackage?.name === "tamagui") { %>
<% if (!props.internalizationPackage) { %>
import { Text } from 'react-native';
<% } %>
import { TamaguiProvider } from 'tamagui';
import config from './tamagui.config';
<% if (!props.internalizationPackage) { %>
import { Text } from 'react-native';
<% } %>
import { TamaguiProvider } from 'tamagui';
import config from './tamagui.config';
<% } %>

<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
import { vexo } from 'vexo-analytics';
import { vexo } from 'vexo-analytics';

vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
<% } %>

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


<% 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 />
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</ThemeProvider>
);
}
export default function App() {
return (
<ThemeProvider theme={theme}>
<% 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>
<% } %>
<StatusBar style="auto" />
</ThemeProvider>
);
}
<% } else if (props.stylingPackage?.name === "tamagui") {%>
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>
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</TamaguiProvider>
);
}
export default function App() {
return (
<TamaguiProvider config={config}>
<% 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>
<% } %>
<StatusBar style="auto" />
</TamaguiProvider>
);
}
<% } else { %>
export default function App() {
return (
<>
<ScreenContent title="Home" path="App.tsx">
<% if (props.internalizationPackage?.name === "i18next") { %>
<InternalizationExample />
<% } %>
</ScreenContent>
<StatusBar style="auto" />
</>
);
}
<% } %>

export default function App() {
return (
<>
<% 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>
<% } %>
<StatusBar style="auto" />
</>
);
}
<% } %>
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 @@ -93,6 +93,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
103 changes: 57 additions & 46 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
@@ -1,79 +1,90 @@
<% if (props.stylingPackage?.name === "nativewind") { %>
import '../global.css';
import '../global.css';
<% } else if (props.stylingPackage?.name === "nativewinui") { %>
import '../global.css';
import 'expo-dev-client';
import '../global.css';
import 'expo-dev-client';
<% } %>
<% if (props.stylingPackage?.name === "unistyles") { %>
import '../unistyles';
<% } %>

<% if (props.internalizationPackage?.name === "i18next") { %>
import '../translation';
import '../translation';
<% } %>

import 'react-native-gesture-handler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Stack } from 'expo-router';

<% if (props.stylingPackage?.name==="tamagui" ) { %>
import React, { useEffect } from "react";
import { TamaguiProvider } from 'tamagui'
import { SplashScreen } from "expo-router";
import { useFonts } from "expo-font";
import React, { useEffect } from "react";
import { TamaguiProvider } from 'tamagui'
import { SplashScreen } from "expo-router";
import { useFonts } from "expo-font";

import config from '../tamagui.config';
import config from '../tamagui.config';

SplashScreen.preventAutoHideAsync();
SplashScreen.preventAutoHideAsync();
<% } else if (props.stylingPackage?.name === "restyle") { %>
import { ThemeProvider } from '@shopify/restyle';
import { theme } from '../theme';
import { ThemeProvider } from '@shopify/restyle';

import { theme } from '../theme';
<% } %>

<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
import { vexo } from 'vexo-analytics';
import { vexo } from 'vexo-analytics';

vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
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.
initialRouteName: "(drawer)",
// Ensure that reloading on `/modal` keeps a back button present.
initialRouteName: "(drawer)",
};

export default function RootLayout() {
<% if (props.stylingPackage?.name==="tamagui" ) { %>
const [loaded] = useFonts({
Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
});
<% if (props.stylingPackage?.name==="tamagui" ) { %>
const [loaded] = useFonts({
Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
});

useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);

if (!loaded) return null;
<% } %>
if (!loaded) return null;
<% } %>

return (
<% if (props.stylingPackage?.name === "tamagui") { %>
<TamaguiProvider config={config}>
<% } else if (props.stylingPackage?.name === "restyle") { %>
<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>
</GestureHandlerRootView>
<% if (props.stylingPackage?.name === "tamagui") { %>
</TamaguiProvider>
<% } else if (props.stylingPackage?.name === "restyle") { %>
</ThemeProvider>
return (
<% if (props.stylingPackage?.name === "tamagui") { %>
<TamaguiProvider config={config}>
<% } else if (props.stylingPackage?.name === "restyle") { %>
<ThemeProvider theme={theme}>
<% } %>
<GestureHandlerRootView style={{ flex: 1 }}>
<% 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>
<% } else if (props.stylingPackage?.name === "restyle") { %>
</ThemeProvider>
<% } %>
);
}
Loading