react-native#StyleSheet JavaScript 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: StoryListItem.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
Styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    marginStart: 10,
    marginEnd: 10,
    marginTop: 10,
    marginBottom: 5,
    alignItems: 'center',
  },
  storyText: {
    color: 'white',
    fontSize: 12,
    marginTop: 5,
  },
})
Example #2
Source File: Input.js    From react-native-select-dropdown with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  defaultInputStyle: {
    width: '100%',
    height: '100%',
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    justifyContent: 'center',
    paddingHorizontal: '4%',
  },
  inputField: {
    flex: 1,
    height: '100%',
    backgroundColor: '#0000',
    textAlignVertical: 'center',
    paddingVertical: 0,
  },
  pressableLeft: {
    height: '100%',
    marginRight: '4%',
    justifyContent: 'center',
  },
  pressableRight: {
    height: '100%',
    marginLeft: '4%',
    justifyContent: 'center',
  },
})
Example #3
Source File: index.css.js    From bluezone-app with GNU General Public License v3.0 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    borderRadius: 12,
    paddingVertical: 14,
    alignItems: 'center',
  },

  text: {
    fontSize: fontSize.larger,
    textAlign: 'center',
    color: '#FFFFFF',
  },

  scanImage: {
    width: 16,
    height: 16,
    marginRight: 3,
  },
})
Example #4
Source File: Blog.js    From Get-Placed-App with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
    cardStyle: {
        padding: 10,
        margin: 10,

    },
    fab: {
        position: 'absolute',
        backgroundColor: "#002223",
        margin: 46,
        right: -30,
        bottom: 0,
    }
})
Example #5
Source File: modals.js    From Spring2020_MyFood_FrontEnd with GNU General Public License v3.0 6 votes vote down vote up 
styles = StyleSheet.create({
  myModal: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#e0f7f3',
    height: '100%',
    width: '100%'
  },
})
Example #6
Source File: loading.js    From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  image: {
    height: '50%',
    width: '50%',
    resizeMode: 'center'
  },
  title: {
    fontFamily: 'IBMPlexSans-Medium',
    fontSize: 18,
    color: '#323232'
  }
})
Example #7
Source File: animatableExample.js    From Alfredo-Mobile with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  button: {
    margin: 10,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center'
  },
  fadeInButton: {
    backgroundColor: '#ff3b3a'
  },
  fadeInButtonText: {
    color: 'white'
  },
  jelloButton: {
    backgroundColor: 'white'
  },
  pulseButton: {
    backgroundColor: '#ffc700'
  },
  pulseButtonText: {
    color: 'white'
  }
})
Example #8
Source File: Stats.js    From Legacy with Mozilla Public License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  levelSelect_menuItem: {
    padding: 4,
    paddingVertical: 0,
    fontSize: 12,
  },
  cell: {
    marginHorizontal: -1,
    height: 24,
    padding: 4,
    alignItems: "center"
  },
  cell_text: {
    flexDirection: "row",
    textAlign: "center",
    width: '100%',
    fontSize: 12
  }
})
Example #9
Source File: wallpaper-app-container.js    From React-Messenger-App with MIT License 6 votes vote down vote up 
styles = StyleSheet.create( {
    container: {
        backgroundColor: 'black',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
      },
} )
Example #10
Source File: Button.js    From timetable with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  button: {
    borderRadius: 10,
    paddingVertical: 4,
    paddingHorizontal: 7
  },
  buttonText: {
    fontWeight: 'bold',
    textTransform: 'uppercase',
    textAlign: 'center'
  }
})
Example #11
Source File: styles.js    From filen-mobile with GNU Affero General Public License v3.0 6 votes vote down vote up 
theme = StyleSheet.create({
    dark: {
        bottomBar: {
            backgroundColor: colors.darkBackgroundGray
        }
    },
    light: {
        bottomBar: {
            backgroundColor: colors.lightGray
        }
    }
})
Example #12
Source File: auth.js    From perform-2020-hotday with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#282C35',
    padding: 10
  },
  label: {
    fontSize: 24,
    color: 'white',
    padding: 10
  },
  input: {
    fontSize: 24,
    backgroundColor: '#fff',
    padding: 10,
    margin: 10
  },
  viewText: {
    color: 'white',
    fontSize: 20,
    paddingTop: 30,
    paddingLeft: 10,
    paddingRight: 10
  }
})
Example #13
Source File: App.js    From react-native-collapsible-tabview with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    padding: 16,
  },
  button: {
    flex: 1,
    height: 48,
    backgroundColor: '#eee',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 24,
    paddingHorizontal: 16,
  },
})
Example #14
Source File: birthdaymodel.js    From Reminder-App with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  text: {
    fontWeight: "bold",
    color: "gray",
    fontSize: 24,
  },
  sep: {
    borderWidth: 1,
    borderColor: "gray",
    marginHorizontal: 10,
    opacity: 0.5,
    alignSelf: "stretch",
    marginVertical: 20,
  },
  model: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 10,
    margin: 5,
    borderRadius: 10,
    backgroundColor: "white",
    borderWidth: 2,
    borderColor: "gray",
  },
  button: {
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 5,
    padding: 10,
    margin: 5,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "gray",
  },
})
Example #15
Source File: index.js    From react-native-in-app-review with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  MainContainer: {flex: 1},
  CartExampleTxt: {
    fontSize: 16,
    color: '#006E52',
    fontWeight: 'bold',
    margin: 15,
  },
  RateMeBtn: {
    backgroundColor: '#6E0052',
    alignSelf: 'center',
    padding: 15,
    paddingHorizontal: 30,
    borderRadius: 10,
  },
  RateMeTxt: {color: '#fff', fontWeight: 'bold', fontSize: 15},
  containerBtn: {justifyContent: 'center', flex: 1},
})
Example #16
Source File: ProductPolicy.js    From haven with MIT License 6 votes vote down vote up 
styles = {
  title: {
    fontSize: 15,
    fontWeight: 'bold',
    fontStyle: 'normal',
    lineHeight: 15,
    letterSpacing: 0,
    textAlign: 'left',
    color: primaryTextColor,
  },
  activityIndicator: {
    ...StyleSheet.absoluteFill,
    alignItems: 'center',
    justifyContent: 'center',
  },
  webviewWrapper: {
    paddingHorizontal: 6,
    flex: 1,
  },
  emptyWrapper: {
    flex: 1,
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 185,
  },
  emptyIcon: {
    marginBottom: 10,
  },
  emptyText: {
    color: '#8a8a8f',
    fontSize: 15,
    width: 294,
    textAlign: 'center',
  },
}
Example #17
Source File: LoginScreen.js    From CoughCheckApp with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
	wrapper: {
		backgroundColor: 'rgba(255,255,255,1)',
		flex: 1,
		justifyContent: 'center',
		// alignItems: 'stretch',
		// width: '100%',
		paddingTop: '5%',
		paddingBottom: '5%',
		paddingLeft: '10%',
		paddingRight: '10%',
	},
	textWrapper: {
		marginTop: 10,
		marginBottom: 10,
		flexShrink: 1,
	},
})
Example #18
Source File: Entry.js    From universal-verifier-app with GNU General Public License v3.0 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    paddingTop: (Platform.OS === 'ios') ? 20 : 0,
    flex: 1
  },
  border: {
    paddingTop: 15,
  },
  flatList: {
    flex: 1
  },
  icon:{
		color:'#fff',
		paddingRight: 0,
		fontSize:25
	},
  listItem: {
    paddingBottom: 15,
    paddingLeft: 15,
    paddingRight: 15,
  },
  centerEmptySet: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100%'
  }
})
Example #19
Source File: AudioControlPanel.js    From react-native-audio-video-tools with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-end',
    },
    rowWrapper: {
        width: '100%',
        flexDirection: 'row',
    },
})
Example #20
Source File: index.js    From guardioes-app with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
    avatar: {
        borderColor: '#ffffff',
        borderWidth: 3,
    },
    avatars: {
        marginLeft: scale(-20),
        borderColor: '#ffffff',
        borderWidth: 3,
    },
    iconStyle: {
        marginLeft: scale(5),
    },
    iconRedeSocial: {
        marginBottom: Platform.OS === 'ios' ? -3 : 0,
    },
})
Example #21
Source File: ActionSheetCell.js    From RRWallet with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  wrap: {
    width: "100%",
    height: 56,
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginLeft: 0,
    marginRight: 0,
    height: 56,
  },
  containerBorder: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: Theme.borderColor,
  },
  label: {
    marginRight: 8,
    fontSize: 16,
    color: Theme.textColor.primary,
  },
  selectTextView: {
    flex: 1,
    fontSize: 16,
  },
  selectTextView_placeholder: {
    color: Theme.textColor.placeHolder,
  },
  selectTextView_selected: {
    color: Theme.textColor.primary,
  },
  placeHolder: {
    fontSize: 14,
    color: Theme.textColor.minorTitle2,
  },
})
Example #22
Source File: AppNavigator.js    From react-native-instagram-clone with MIT License 5 votes vote down vote up 
Styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  logoContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'center',
  },
  userNameContainer: {
    borderColor: '#262626',
    backgroundColor: colors.loginInputBackground,
    borderWidth: 1,
    borderRadius: 5,
    height: 40,
    justifyContent: 'center',
    //alignItems: 'center',
    marginStart: 20,
    marginEnd: 20,
    marginTop: 20,
    marginBottom: 20,
  },
  userNameInput: {
    marginStart: 10,
    color: 'white',
  },
  passwordContainer: {
    borderColor: '#262626',
    borderWidth: 1,
    borderRadius: 5,
    height: 40,
    justifyContent: 'center',
    //alignItems: 'center',
    marginStart: 20,
    marginEnd: 20,
    backgroundColor: colors.loginInputBackground,
    marginBottom: 20,
  },
  passwordInput: {marginStart: 10, color: 'white'},
  forgotPasswordContainer: {
    alignItems: 'flex-end',
    marginEnd: 20,
  },
  forgotPasswordText: {
    color: '#0088f8',
  },
  loginContainer: {
    alignItems: 'center',
    height: 40,
    marginTop: 30,
    backgroundColor: '#0088f8',
    justifyContent: 'center',
    marginStart: 20,
    marginEnd: 20,
    borderRadius: 5,
  },
  loginText: {
    color: '#fff',
  },
})