Janic Duplessis 0f37f38557 0.4.1 | 5 yıl önce | |
---|---|---|
.github | 5 yıl önce | |
android | 5 yıl önce | |
example | 5 yıl önce | |
ios | 5 yıl önce | |
src | 5 yıl önce | |
.eslintignore | 5 yıl önce | |
.eslintrc.js | 5 yıl önce | |
.gitattributes | 5 yıl önce | |
.gitignore | 5 yıl önce | |
.prettierrc | 5 yıl önce | |
.watchmanconfig | 5 yıl önce | |
LICENSE | 5 yıl önce | |
README.md | 5 yıl önce | |
babel.config.js | 5 yıl önce | |
metro.config.js | 5 yıl önce | |
package.json | 5 yıl önce | |
react-native-safe-area-context.podspec | 5 yıl önce | |
tsconfig.json | 5 yıl önce | |
yarn.lock | 5 yıl önce |
A flexible way to handle safe area, also works on Android!
Install the library using either Yarn:
yarn add react-native-safe-area-context
or npm:
npm install --save react-native-safe-area-context
You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:
react-native link react-native-safe-area-context
If you can’t or don’t want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them):
Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile
:
pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
Make the following changes:
android/settings.gradle
include ':react-native-safe-area-context'
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
android/app/build.gradle
dependencies {
...
implementation project(':react-native-safe-area-context')
}
android/app/src/main/.../MainApplication.java
On top, where imports are:
import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
Add the SafeAreaContextPackage
class to your list of exported packages.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new SafeAreaContextPackage()
);
}
Add SafeAreaProvider
in your app root component:
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return (
<SafeAreaProvider>
...
</SafeAreaProvider>
);
}
Usage with hooks api:
import { useSafeArea } from 'react-native-safe-area-context';
function HookComponent() {
const insets = useSafeArea();
return <View style={{ paddingTop: insets.top }} />;
}
Usage with consumer api:
import { SafeAreaConsumer } from 'react-native-safe-area-context';
class ClassComponent extends React.Component {
render() {
return (
<SafeAreaConsumer>
{insets => <View style={{ paddingTop: insets.top }} />}
</SafeAreaConsumer>
);
}
}
Usage with SafeAreaView
:
import { SafeAreaView } from 'react-native-safe-area-context';
function SomeComponent() {
return (
<SafeAreaView>
<View />
</SafeAreaView>
);
}