Skip to content

feat: replace rn iphone x helper with safe area context #3478

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

Merged
lukewalczak merged 1 commit into from
Dec 5, 2022
Merged

feat: replace rn iphone x helper with safe area context #3478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 19 additions & 2 deletions docs/pages/1.getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ title: Getting Started
📍<i><b>Note:</b></i> The following documentation and installation steps are related to the <b>v5 release candidate</b>.
If you are looking for the latest stable version documentation, please check the [v4 docs](https://callstack.github.io/react-native-paper/4.0/index.html).

Open a Terminal in your project's folder and run:
* Open a Terminal in your project's folder and run:

```sh
yarn add react-native-paper@5.0.0-rc.10
Expand All @@ -18,7 +18,24 @@ or
```sh
npm install react-native-paper@5.0.0-rc.10
```
If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).

* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.

```sh
yarn add react-native-safe-area-context
```
or
```sh
npm install react-native-safe-area-context
```

Additionaly for `iOS` platform there is a requirement to link the native parts of the library:

```sh
npx pod-install
```

* If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).

Specifically `MaterialCommunityIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android).

Expand Down
19 changes: 18 additions & 1 deletion docs/pages/10.migration-guide-to-5.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Below you can find the most important information about the components whose API

### Installation

Currently v5 is a release candidate, which means it won't be installed by default from the `npm`. In order to do that, there is a need to explicitly pass package version during installation:
* Currently `v5` is a release candidate, which means it won't be installed by default from the `npm`. In order to do that, there is a need to explicitly pass package version during installation:

```sh
yarn add react-native-paper@5.0.0-rc.10
Expand All @@ -23,6 +23,23 @@ or
```sh
npm install react-native-paper@5.0.0-rc.10
```

* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.

```sh
yarn add react-native-safe-area-context
```
or
```sh
npm install react-native-safe-area-context
```

Additionaly for `iOS` platform there is a requirement to link the native parts of the library:

```sh
npx pod-install
```

## Theming

### Versioning
Expand Down
2 changes: 1 addition & 1 deletion example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"react-native": "0.69.6",
"react-native-gesture-handler": "~2.5.0",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
Expand Down
4 changes: 2 additions & 2 deletions example/src/ExampleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FlatList } from 'react-native';

import type { StackNavigationProp } from '@react-navigation/stack';
import { Divider, List } from 'react-native-paper';
import { useSafeArea } from 'react-native-safe-area-context';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
import AnimatedFABExample from './Examples/AnimatedFABExample';
Expand Down Expand Up @@ -112,7 +112,7 @@ export default function ExampleList({ navigation }: Props) {
const keyExtractor = (item: { id: string }) => item.id;

const { colors } = useExampleTheme();
const safeArea = useSafeArea();
const safeArea = useSafeAreaInsets();

return (
<FlatList
Expand Down
104 changes: 53 additions & 51 deletions example/src/Examples/SnackbarExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,64 +38,66 @@ const SnackbarExample = () => {
};

return (
<ScreenWrapper contentContainerStyle={styles.container}>
<List.Section title="Snackbar options">
<View style={styles.row}>
<Text>Action button</Text>
<Switch
value={showAction}
onValueChange={() =>
setOptions({ ...options, showAction: !showAction })
}
/>
</View>
{theme.isV3 && (
<>
<ScreenWrapper contentContainerStyle={styles.container}>
<List.Section title="Snackbar options">
<View style={styles.row}>
<Text>Close icon button</Text>
<Text>Action button</Text>
<Switch
value={showCloseIcon}
value={showAction}
onValueChange={() =>
setOptions({ ...options, showCloseIcon: !showCloseIcon })
setOptions({ ...options, showAction: !showAction })
}
/>
</View>
)}
<View style={styles.row}>
<Text>Longer message</Text>
<Switch
value={showLongerMessage}
onValueChange={() =>
setOptions({ ...options, showLongerMessage: !showLongerMessage })
}
/>
</View>
<View style={styles.row}>
<Text>Longer action</Text>
<Switch
value={showLongerAction}
onValueChange={() =>
setOptions({
...options,
showLongerMessage: true,
showCloseIcon: true,
showLongerAction: !showLongerAction,
})
{theme.isV3 && (
<View style={styles.row}>
<Text>Close icon button</Text>
<Switch
value={showCloseIcon}
onValueChange={() =>
setOptions({ ...options, showCloseIcon: !showCloseIcon })
}
/>
</View>
)}
<View style={styles.row}>
<Text>Longer message</Text>
<Switch
value={showLongerMessage}
onValueChange={() =>
setOptions({
...options,
showLongerMessage: !showLongerMessage,
})
}
/>
</View>
<View style={styles.row}>
<Text>Longer action</Text>
<Switch
value={showLongerAction}
onValueChange={() =>
setOptions({
...options,
showLongerAction: !showLongerAction,
})
}
/>
</View>
</List.Section>

<View style={styles.wrapper}>
<Button
mode="outlined"
onPress={() =>
setOptions({ ...options, showSnackbar: !showSnackbar })
}
/>
>
{showSnackbar ? 'Hide' : 'Show'}
</Button>
</View>
</List.Section>

<View style={styles.wrapper}>
<Button
mode="outlined"
onPress={() =>
setOptions({ ...options, showSnackbar: !showSnackbar })
}
>
{showSnackbar ? 'Hide' : 'Show'}
</Button>
</View>

</ScreenWrapper>
<Snackbar
visible={showSnackbar}
onDismiss={() => setOptions({ ...options, showSnackbar: false })}
Expand All @@ -110,7 +112,7 @@ const SnackbarExample = () => {
>
{showLongerMessage ? LONG_MESSAGE : SHORT_MESSAGE}
</Snackbar>
</ScreenWrapper>
</>
);
};

Expand Down
83 changes: 39 additions & 44 deletions example/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@ import {
MD3Theme,
useTheme,
} from 'react-native-paper';
import {
SafeAreaInsetsContext,
SafeAreaProvider,
} from 'react-native-safe-area-context';
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';

import { isWeb } from '../utils';
import DrawerItems from './DrawerItems';
Expand Down Expand Up @@ -166,46 +163,44 @@ export default function PaperExample() {

return (
<PaperProvider theme={theme}>
<SafeAreaProvider>
<PreferencesContext.Provider value={preferences}>
<React.Fragment>
<NavigationContainer
initialState={initialState}
onStateChange={(state) =>
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
}
>
{isWeb ? (
<App />
) : (
<SafeAreaInsetsContext.Consumer>
{(insets) => {
const { left, right } = insets || { left: 0, right: 0 };
const collapsedDrawerWidth = 80 + Math.max(left, right);
return (
<Drawer.Navigator
screenOptions={{
drawerStyle: collapsed && {
width: collapsedDrawerWidth,
},
}}
drawerContent={() => <DrawerContent />}
>
<Drawer.Screen
name="Home"
component={App}
options={{ headerShown: false }}
/>
</Drawer.Navigator>
);
}}
</SafeAreaInsetsContext.Consumer>
)}
<StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
</NavigationContainer>
</React.Fragment>
</PreferencesContext.Provider>
</SafeAreaProvider>
<PreferencesContext.Provider value={preferences}>
<React.Fragment>
<NavigationContainer
initialState={initialState}
onStateChange={(state) =>
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
}
>
{isWeb ? (
<App />
) : (
<SafeAreaInsetsContext.Consumer>
{(insets) => {
const { left, right } = insets || { left: 0, right: 0 };
const collapsedDrawerWidth = 80 + Math.max(left, right);
return (
<Drawer.Navigator
screenOptions={{
drawerStyle: collapsed && {
width: collapsedDrawerWidth,
},
}}
drawerContent={() => <DrawerContent />}
>
<Drawer.Screen
name="Home"
component={App}
options={{ headerShown: false }}
/>
</Drawer.Navigator>
);
}}
</SafeAreaInsetsContext.Consumer>
)}
<StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
</NavigationContainer>
</React.Fragment>
</PreferencesContext.Provider>
</PaperProvider>
);
}
8 changes: 4 additions & 4 deletions example/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9394,10 +9394,10 @@ react-native-reanimated@~2.9.1:
setimmediate "^1.0.5"
string-hash-64 "^1.0.3"

react-native-safe-area-context@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"
integrity sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA==
react-native-safe-area-context@^4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==

react-native-screens@~3.15.0:
version "3.15.0"
Expand Down
9 changes: 5 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@
},
"dependencies": {
"@callstack/react-theme-provider": "^3.0.8",
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.3.1"
"color": "^3.1.2"
},
"devDependencies": {
"@babel/core": "^7.19.6",
Expand Down Expand Up @@ -89,6 +88,7 @@
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-builder-bob": "^0.17.1",
"react-native-safe-area-context": "^4.4.1",
"react-native-vector-icons": "9.2.0",
"react-test-renderer": "18.0.0",
"release-it": "^13.4.0",
Expand All @@ -98,7 +98,8 @@
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-vector-icons": "*"
"react-native-vector-icons": "*",
"react-native-safe-area-context": "*"
},
"husky": {
"hooks": {
Expand All @@ -123,7 +124,7 @@
"__fixtures__\\/[^/]+\\/(output|error)\\.js"
],
"transformIgnorePatterns": [
"node_modules/(?!(@react-native|react-native(-.*)?|react-native-iphone-x-helper)/)"
"node_modules/(?!(@react-native|react-native(-.*)?)/)"
]
},
"greenkeeper": {
Expand Down
Loading