DEPRECATED

https://github.com/facebook/react-native/commit/e1df3c878203fbed6cdf541849ab3ad490b8c93f

react-native-ratioview

High performance aspect ratio layout container

Install

1. npm i react-native-ratioview --save
2. react-native link react-native-ratioview

Manual install

Android

1. npm i react-native-ratioview --save

2. Open up android/app/src/main/java/[...]/MainApplication.java Add new ReactRatioViewPackage()to the list returned by thegetPackages()` method

3. Append 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')

4. 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.
6. Run your project (Cmd+R)

Usage

<RatioView whRatio={1200 / 630}>
  <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</RatioView>