Error message - TouchableOpacity is not a function

Question

I'm new to React Native and I'm now doing my first app :) I get this error message saying "TouchableOpacity is not a function", see screenshot here. Have tried to Google to understand but without any success.

Anyone know what's wrong with my code?

import React from 'react'
import { useState } from 'react'
import { View, Vibration, TouchableOpacity } from 'react-native'
import styled from 'styled-components'

const TouchButton = styled.TouchableOpacity`
  padding: 25px;
  margin: 0px;
  width: 250px;
  borderRadius: 25px;
  backgroundColor: #411271;
  border: 4px #01AA31; 
`; 
const ButtonText = styled.Text`
  textAlign: center;
  fontSize: 20px;
  justify-content: center;
  alignItems: center;
  color: #F5C603;
`;
const Title = styled.Text`
  fontSize: 204px;
  marginBottom: 50px;
  color: #F5C603;
  textAlign: center;
  justifyContent: center;
  alignItems: center;
`;

export const Training = ({activitiesArray}) => {

  const [activity, setActivity] = useState("")

  const getActivity = () => {
    const theActivity = activitiesArray[Math.floor(Math.random() * activitiesArray.length)]
    setActivity(theActivity.activity)
  }

  return (
    <View>
      <Title>
        {activity}
      </Title>
      <TouchButton onPress={() => {
      getActivity(); Vibration.vibrate()}}>
        <ButtonText>Hur ska jag röra på mig idag?</ButtonText>
      </TouchButton>
    </View>
  )
};

Answer 1

It seems like you are importing styled-component from the wrong location. You should be importing from styled-components/native. Please refer to the official docs: https://styled-components.com/docs/basics#react-native.