import {
  responsiveWidth,
  responsiveHeight,
  responsiveFontSize,
  responsiveSize
} from 'react-native-rescomponent'

import {
  responsiveWidth as resWidth,
  responsiveHeight as resHeigth,
  responsiveFontSize as resFontSize,
  responsiveSize as resSize
} from 'react-native-rescomponent'

// Use percentage as String
responsiveWidth('100%')

// Use percentage as Integer
responsiveWidth(100)

import React, { Component } from 'react'
import { Container } from 'native-base'
import {
  responsiveWidth as resWidth,
  responsiveHeight as resHeigth,
  responsiveFontSize as resFontSize,
  responsiveSize as resSize
} from 'react-native-rescomponent'

export default class MyComponent extends Component{
  render(){
    return(
      <Container style={{
        width: resWidth('100%'),
        height: resHeight('100%')
      }}>
      
        ...
        
       </Container>
    )
  }
}

import React, { Component } from 'react'
import { Container, Content } from 'native-base'
import { View } from 'react-native'
import {
  responsiveWidth as resWidth,
  responsiveHeight as resHeigth,
  responsiveFontSize as resFontSize,
  responsiveSize as resSize
} from 'react-native-rescomponent'

export default class MyComponent extends Component{
  render(){
    return(
      <Container style={{width: resWidth('100%'), height: resHeight('100%')}}>
      
        <Content contentContainerStyle={{
          justifyContent: 'center',
          alignItems:'center',
          flex: 1
        }}>
        
          <View style={{width: resSize('50%'), height: resSize('50%'), backgroundColor: "blue"}}>

            ...

          </View>
        
        </Content>
        
       </Container>
    )
  }
}

import React, { Component } from 'react'
import { Container, Content } from 'native-base'
import { View, Text } from 'react-native'
import {
  responsiveWidth as resWidth,
  responsiveHeight as resHeigth,
  responsiveFontSize as resFontSize,
  responsiveSize as resSize
} from 'react-native-rescomponent'

export default class MyComponent extends Component{
  render(){
    return(
      <Container style={{
        width: resWidth('100%'),
        height: resHeight('100%')
      }}>
      
        <Content contentContainerStyle={{
          justifyContent: 'center',
          alignItems:'center',
          flex: 1
        }}>
        
          <View style={{width: resSize('50%'), height: resSize('50%'), backgroundColor: "blue"}}>

            <Text style={{fontSize: resFontSize(1)}}>Responsive Text</Text>

          </View>
        
        </Content>
        
       </Container>
    )
  }
}