react-native#StyleSheet TypeScript Examples

The following examples show how to use react-native#StyleSheet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From react-native-gifted-charts with MIT License 6 votes vote down vote up 
triangleStyles = StyleSheet.create({
  triangleCorner: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightColor: 'transparent',
    transform: [{rotate: '90deg'}],
  },
})
Example #2
Source File: RemoteMutePopUp.tsx    From ReactNative-UIKit with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  button: {
    color: '#fff',
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff',
    padding: 2,
    borderRadius: 4,
  },
  buttonClose: {
    color: '#fff',
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff',
    padding: 2,
    borderRadius: 4,
  },
  container: {
    backgroundColor: '#007bffaa',
    position: 'absolute',
    width: 240,
    height: 80,
    top: Dimensions.get('screen').height / 2 - 80,
    left: Dimensions.get('screen').width / 2 - 120,
    zIndex: 100,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
  fontStyle: {color: '#fff', fontWeight: '700', fontSize: 18},
  buttonText: {color: '#fff', paddingHorizontal: 8},
  buttonHolder: {
    flexDirection: 'row',
    display: 'flex',
    width: '100%',
    justifyContent: 'space-around',
  },
})
Example #3
Source File: OnBoarding1.tsx    From react-native-meetio with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  arrowButton: {
    width: 52,
    height: 52,
    borderRadius: 26,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
})
Example #4
Source File: FakeCurrencyInput.tsx    From react-native-currency-input with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  inputContainer: {
    position: 'relative',
  },
  inputHidden: {
    color: 'transparent',
    position: 'absolute',
    top: 0,
    left: -20,
    right: 0,
    bottom: 0,
    fontSize: 1,
  },
})
Example #5
Source File: styles.tsx    From react-native-floating-label-input with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    color: '#49658c',
    borderColor: '#49658c',
    borderWidth: 2,
    borderRadius: 12,
    paddingHorizontal: 11,
    backgroundColor: '#00000000',
    paddingTop: 10,
    paddingBottom: 10,
    alignContent: 'center',
    justifyContent: 'center',
  },
  input: {
    minHeight: 28,
    color: '#000',
    paddingVertical: 0,
    flex: 1,
    zIndex: 10,
  },
  img: {
    height: 25,
    width: 25,
    alignSelf: 'center',
  },
  toggleButton: {
    zIndex: 11,
    alignSelf: 'center',
    justifyContent: 'flex-end',
  },
  countdown: {
    position: 'absolute',
    right: 11,
    bottom: 0,
    color: '#49658c',
    fontSize: 10,
  },
})
Example #6
Source File: BottomSheet.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  collapseContent: {
    position: 'absolute',
    width: '100%',
  },
  collapseContentHandleBar: {
    position: 'absolute',
    width: '100%',
    alignItems: 'center',
    top: -24,
  },
  collapseButton: {
    position: 'absolute',
    top: 0,
    right: 15,
    height: 30,
    width: 30,
    borderRadius: 15,
    backgroundColor: 'rgba(118, 118, 128, 0.12)',
    alignItems: 'center',
    justifyContent: 'center',
    transform: [{rotate: '90deg'}],
  },
  spacer: {
    marginBottom: -18,
  },
})
Example #7
Source File: App.tsx    From react-native-masonry-scrollview with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    margin: 8
  },
  headerText: {
    fontWeight: "bold",
    marginHorizontal: 8,
    fontSize: 16
  },
  imageContainer: {
    margin: 10,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: "silver"
  },
  evenColumnStyle: {},
  oddColumnStyleVertical: { marginTop: 60 },
  oddColumnStyleHorizontal: { marginLeft: 60 }
})
Example #8
Source File: Header.tsx    From happy with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: '#f9fafc',
    borderBottomWidth: 1,
    borderColor: '#dde3f0',
    paddingTop: 44,

    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },

  title: {
    fontFamily: 'Nunito_600SemiBold',
    color: '#8fa7b3',
    fontSize: 16,
  },
})
Example #9
Source File: Bar.tsx    From expo-progress with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    overflow: 'hidden',
  },
  bar: {
    resizeMode: 'stretch',
    left: 0,
    position: 'absolute',
    height: '100%',
  },
})
Example #10
Source File: FlutterwaveButton.tsx    From flutterwave-react-native with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  buttonBusyOvelay: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.6)',
  },
  buttonBusy: {
    borderColor: colors.primaryLight,
  },
  buttonAlignLeft: {
    justifyContent: 'flex-start',
  },
  button: {
    paddingHorizontal: 16,
    minWidth: 100,
    height: 52,
    borderColor: colors.primary,
    borderWidth: 1,
    borderRadius: 6,
    backgroundColor: colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    overflow: 'hidden',
  },
  buttonContent: {
    resizeMode: 'contain',
    width: 187.3,
    height: 187.3 / contentSizeDimension
  },
})
Example #11
Source File: AboutUsPage.tsx    From GiveNGo with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  card: {
    margin: 2,
    height: '100%',
    borderColor: 'transparent',
  },
  text: {
    textAlign: 'center',
  },
})
Example #12
Source File: index.tsx    From frontatish with MIT License 6 votes vote down vote up 
getStyles = (
  Colors: ColorType,
  barColor: string | undefined,
  width: number,
) => {
  return StyleSheet.create({
    progressContainer: {
      padding: 2,
      height: 4,
      width,
    },
    progressBar: {
      width: width / 4,
      padding: 2,
      borderRadius: 4,
      backgroundColor: barColor || Colors.white,
    },
  });
}
Example #13
Source File: PrimaryButton.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  button: {
    minHeight: 48,
    borderRadius: 4,
    backgroundColor: colors.primary,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    color: colors.textInverted,
    fontSize: 18
  }
})
Example #14
Source File: AddStoryButton.tsx    From companion-kit with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
    button: {
        flex: -1,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',

    },
    bgImage: {
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
    },
    icon: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
    },
})
Example #15
Source File: DetailScreen.tsx    From react-native-sdk with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  image: {
    width: 300,
    height: 300,
  },
  text: {
    paddingTop: 10,
    fontSize: 15,
  },
  button: {
    marginTop: 20,
  },
  buttonText: {
    fontSize: 20,
  }
})
Example #16
Source File: App.tsx    From react-native-section-alphabet-list with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background.light,
  },

  listItemContainer: {
    flex: 1,
    height: sizes.itemHeight,
    paddingHorizontal: sizes.spacing.regular,
    justifyContent: 'center',
    borderTopColor: colors.seperatorLine,
    borderTopWidth: 1,
  },

  listItemLabel: {
    color: colors.text.dark,
    fontSize: 14,
  },

  sectionHeaderContainer: {
    height: sizes.headerHeight,
    backgroundColor: colors.background.dark,
    justifyContent: 'center',
    paddingHorizontal: sizes.spacing.regular,
  },

  sectionHeaderLabel: {
    color: colors.background.light,
  },

  listHeaderContainer: {
    height: sizes.listHeaderHeight,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
})
Example #17
Source File: style.ts    From curved-bottom-navigation-bar with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  buttonTab: {
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  dot: {
    position: 'absolute',
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.3,
    shadowRadius: 3,

    elevation: 2,
  },
  title: {
    fontSize: 13.5,
    color: '#000',
  },
})
Example #18
Source File: ChangeLanguage.tsx    From hamagen-react-native with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    backgroundColor: '#fff'
  },
  titleWrapper: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.2,
    paddingTop: SCREEN_HEIGHT * 0.1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  title: {
    fontSize: 22,
    marginBottom: 30
  },
  languageButton: {
    width: SCREEN_WIDTH * 0.75,
    height: IS_SMALL_SCREEN ? 50 : 70,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 22,
    borderRadius: 7,
    borderWidth: 1,
    borderColor: MAIN_COLOR
  },
  text: {
    fontSize: 15
  }
})