react-native-elements#useTheme JavaScript Examples

The following examples show how to use react-native-elements#useTheme. 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: divider.playground.jsx    From playground with MIT License 5 votes vote down vote up 
DividerPlayground = () => {
  const { theme } = useTheme();
  const params = useView({
    componentName: "Divider",
    props: {
      style: {
        type: PropTypes.Object,
        value: `{width:"80%",margin:20}`,
        description: "Apply style to the divider.",
      },
      color: {
        type: PropTypes.String,
        value: theme.colors.primary,
        description: "Apply color to the divider.",
      },
      inset: {
        type: PropTypes.Boolean,
        value: false,
        description: "Applies inset to the divider if true. Default is left.",
      },
      insetType: {
        type: PropTypes.String,
        value: "left",
        description:
          "Add inset to the divider in left, right, or in both direction. Choose among left, right, or middle.",
      },
      subHeader: {
        type: PropTypes.String,
        value: "React native elements",
        description: "Adds a sub-header next to divider.",
      },
      subHeaderStyle: {
        type: PropTypes.Object,
        value: `{}`,
        description: "Adds styles to the sub header of divider.",
      },
      width: {
        type: PropTypes.Number,
        value: 1,
        description: "Add width to the divider.",
      },
      orientation: {
        type: PropTypes.String,
        value: "horizontal",
        description: "Adds orientation to the divider.",
      },
    },
    scope: {
      Divider,
    },
    imports: {
      "react-native-elements": {
        named: ["Divider"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}
Example #2
Source File: switch.playground.jsx    From playground with MIT License 5 votes vote down vote up 
SwitchPlayground = () => {
  const { theme } = useTheme();
  const params = useView({
    componentName: "Switch",
    props: {
      color: {
        value: theme.colors.primary,
        type: PropTypes.String,
        description: "Color",
      },
      value: {
        value: false,
        type: PropTypes.Boolean,
        description: "Value",
        stateful: true,
      },
      onValueChange: {
        value: "() => setValue(!value)",
        propHook: {
          what: "!value",
          into: "value",
        },
        type: PropTypes.Function,
        description: "Function called when switch state is changed.",
      },
    },
    scope: {
      Switch,
    },
    imports: {
      "react-native-elements": {
        named: ["Switch"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}