How to use react-native-size-matters - 10 common examples

const tokenAmountSize = (tokenAmountLength: number): number => {
  // this resizing logic is different than wallet tabs header
  switch (true) {
    case tokenAmountLength < 16:
      return scale(26)
    case tokenAmountLength < 20:
      return scale(20)
    default:
      return scale(19)
  }
}

const tokenAmountSize = (tokenAmountLength: number): number => {
  // this resizing logic is different than wallet tabs header
  switch (true) {
    case tokenAmountLength < 16:
      return scale(26)
    case tokenAmountLength < 20:
      return scale(20)
    default:
      return scale(19)
  }
}

const tokenAmountSize = (tokenAmountLength: number): number => {
  // this resizing logic is different than wallet tabs header
  switch (true) {
    case tokenAmountLength < 13:
      return scale(40)
    case tokenAmountLength < 16:
      return scale(35)
    case tokenAmountLength < 20:
      return scale(28)
    default:
      return scale(20)
  }
}

const tokenAmountSize = (tokenAmountLength: number): number => {
  // this resizing logic is different than wallet tabs header
  switch (true) {
    case tokenAmountLength < 13:
      return scale(40)
    case tokenAmountLength < 16:
      return scale(35)
    case tokenAmountLength < 20:
      return scale(28)
    default:
      return scale(20)
  }
}

const tokenAmountSize = (tokenAmountLength: number): number => {
  // this resizing logic is different than wallet tabs header
  switch (true) {
    case tokenAmountLength < 13:
      return scale(40)
    case tokenAmountLength < 16:
      return scale(35)
    case tokenAmountLength < 20:
      return scale(28)
    default:
      return scale(20)
  }
}

arrowLeftContainer: {
    justifyContent: 'flex-end',
    alignItems: 'flex-start'
  },

  arrowRightContainer: {
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },

  arrowLeft: {
    left: moderateScale(-6, 0.5)
  },

  arrowRight: {
    right: moderateScale(-6, 0.5)
  }
})

export default style

)
};

MusicSingle.propTypes = {
  title: Proptypes.string,
  artist: Proptypes.string,
  imageUrl: Proptypes.string,
  filename: Proptypes.string,
  id: Proptypes.string,
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginTop: moderateScale(15),
    height: moderateScale(75),
    justifyContent: "space-between",
  },
  imageContainer: {
    height: "100%",
    width: "25%",
    marginRight: moderateScale(20)
  },
  image: {
    borderRadius: moderateScale(10),
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
  descriptionContainer: {

NowPlaying.navigationOptions = ({ navigation }) => ({
  title: "Now Playing",
  headerTransparent: true,
  headerLeft: (
      
        <img style="{{">
      
  ),
  headerRight: (
      
        
      
  ),
  headerTitleStyle: {
    textAlign:'center',
    alignSelf:'center',
    flex:1,
    fontFamily: "Avenir-Book",
    fontSize: moderateScale(20),
    color: color.white
  },
  headerStyle: {

trackStyle={{ backgroundColor: color.white, height: 8}}
              minimumTrackTintColor={color.green}
              thumbStyle={{ borderRadius: 50, width: 5, backgroundColor:color.green }}
          />
        
      

  )
};

const styles = StyleSheet.create({
  container: {
    width: "80%",
  },
  progressBar: {
    height: moderateScale(8),
    borderRadius: moderateScale(50),
  },
  textStyle: {
    color: color.white
  }
});

export default SeekBar;

import { StyleSheet } from "react-native";
import { moderateScale } from "react-native-size-matters";

const style = StyleSheet.create({
  container: {
    width: moderateScale(12),
    height: moderateScale(12),
    borderRadius: moderateScale(12) / 2,
    borderWidth: 2,
    borderColor: "#FFFFFF",
    margin: 5
  }
});

export default style;