Documentation Bug: In Using the theme in your own components

[avimishra18]

Explain what you did

I was reading documentation and came across a possibly erroneous code snippet.

Steps

1. Visit Using the theme in your own components
2. Scroll to makeStyles() example

Code Snippet

I have written possible errors as comments.

import React from 'react';
import { Text } from 'react-native';
import { makeStyles } from 'react-native-elements';

// 1. All other examples are JS but this example as TS?
type Params = {
  fullWidth?: boolean,
};

const MyComponent = (props: Props) => {
  const styles = useStyles(props);

  return (
    {/*  2. 'View' & 'theme' are not defined. */}
    <View style={styles.container}>
      <Text style={{ color: theme.colors.primary }}>Yo!</Text>
    </View>
  );
};

const useStyles = makeStyles((theme, props: Props) => ({
  container: {
    background: theme.colors.white,
    width: props.fullWidth ? '100%' : 'auto',
  },
  text: {
    color: theme.colors.primary,
  },
}));

Possible Solution

Check Snack for the corrected as well as the original code.

Screenshot