How can I use CSS in React Native?

How can I use CSS in React Native?

In React Native, you can't use traditional CSS, but you can use a similar styling approach with JavaScript objects.

Can you show me an example of styling a button?

Sure! You can create a button like this:

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const MyButton = () => {
  return (
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>Click Me</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

This uses the StyleSheet API to define styles.

What about using styled-components?

You can use styled-components in React Native as well! It allows you to write CSS-in-JS. Here's an example:

import styled from 'styled-components/native';

const Button = styled.TouchableOpacity`
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
`;

const ButtonText = styled.Text`
  color: white;
  text-align: center;
`;

const MyButton = () => (
  <Button>
    <ButtonText>Click Me</ButtonText>
  </Button>
);

Are there any performance considerations?

Yes, using too many styles or complex styles can impact performance. It's best to keep styles simple and use StyleSheet for static styles.