init 🚀

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

.gitignore

@@ -0,0 +1,11 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "workbench.colorTheme": "1984 - Fancy"
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Image, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native'
+import {
+  heightPercentageToDP as hp,
+  widthPercentageToDP as wp,
+} from 'react-native-responsive-screen'
+
+const chats = [
+  { name: 'Prem', text: 'My God in heaven, you look like an angel' },
+  { name: 'Pooja', text: 'Are you for real?' },
+  { name: 'Prem', text: 'You have the best pics I have ever seen' },
+  { name: 'Prem', text: 'Everything about you is perfect' },
+  { name: 'Pooja', text: 'OMG ahaha, thank you so so much 🙌' },
+  { name: 'Prem', text: 'I dont want your thank you & all' },
+  { name: 'Pooja', text: 'So what do you want?' },
+  { name: 'Prem', text: 'Plz just teach me how to edit pics 🙏' },
+  { name: 'Pooja', text: 'Go to hell 😡' },
+  { name: 'Prem', text: 'Are you there?' },
+  { name: 'Prem', text: 'Did you just block me? 😅' },
+]
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        <Image
+          source={require('./assets/pikachu_heart_eyes.png')}
+          style={styles.img}
+        />
+        {chats.map((chat, i) => (
+          <Text
+            key={i}
+            style={[
+              styles.commonChat,
+              chat.name === 'Prem' ? styles.rightChat : styles.leftChat,
+            ]}
+          >
+            <Text style={styles.username}>@{chat.name}: </Text>
+            {chat.text}
+          </Text>
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  img: {
+    width: wp('70%'),
+    height: hp('30%'),
+    alignSelf: 'flex-end',
+    resizeMode: 'contain',
+  },
+  commonChat: {
+    color: 'white',
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'white',
+    overflow: 'hidden',
+    padding: 10,
+    margin: 10,
+    fontSize: hp('1.6%'),
+  },
+  leftChat: {
+    backgroundColor: '#c83660',
+    alignSelf: 'flex-start',
+  },
+  rightChat: {
+    backgroundColor: 'rebeccapurple',
+    alignSelf: 'flex-end',
+  },
+  username: {
+    fontWeight: 'bold',
+  },
+})

README.md

@@ -0,0 +1,9 @@
+# responsive-react-native-layout
+
+### Phone
+
+![Screenshot of a phone using react-native-responsive-screen](./phone.png)
+
+### Tablet
+
+![Screenshot of a tablet using react-native-responsive-screen](./tablet.png)

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "responsive-react-native-layout",
+    "slug": "responsive-react-native-layout",
+    "privacy": "public",
+    "sdkVersion": "34.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

@@ -0,0 +1,22 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^34.0.1",
+    "react": "16.8.3",
+    "react-dom": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
+    "react-native-responsive-screen": "^1.2.2",
+    "react-native-web": "^0.11.4"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^6.0.0"
+  },
+  "private": true
+}