react-native-ratioview v1.0.3
react-native-ratioview
High performance aspect ratio layout container
Install
npm i react-native-ratioview --save
react-native link react-native-ratioview
Manual install
Android
npm i react-native-ratioview --save
Open up
android/app/src/main/java/[...]/MainApplication.java Add
new ReactRatioViewPackage()to the list returned by the
getPackages()` methodAppend the following lines to
android/settings.gradle
:include ':react-native-ratioview' project(':react-native-ratioview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ratioview/android')
Insert the following lines inside the dependencies block in
android/app/build.gradle
:```
compile project(':react-native-ratioview')
```
iOS
http://facebook.github.io/react-native/docs/linking-libraries-ios.html
1. npm i react-native-ratioview --save
2. In XCode, in the project navigator, right click Libraries
➜ Add Files to [your project's name]
3. Go to node_modules
➜ react-native-ratioview
and add RatioView.xcodeproj
4. In XCode, in the project navigator, select your project. Add libRatioView.a
to your project's Build Phases
➜ Link Binary With Libraries
5. Click RatioView.xcodeproj
in the project navigator and go the Build Settings
tab. Make sure 'All' is toggled on (instead of 'Basic'). In the Search Paths
section, look for Header Search Paths
and make sure it contains $(SRCROOT)/../../react-native/React
- mark as recursive
.
5. Run your project (Cmd+R
)
Usage
<RatioView whRatio={1200 / 630}>
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</RatioView>