CODEWITHSUNDEEP
androidreact-native
Ernanni
Ernanni

Reputation: 428

React Native: The specified child already has a parent

I have 2 components, DraggableCard and ChooseMachine (ChooseMachine uses a DraggableCard). When I reach the ChooseMachine component it returns me with the error: The specified child already has a parent. You must call removeView() on the child's parent first.

I don't have a clue on what child component is that's being called twice.

I've tried to remove the Some Text that's being passed as a prop to DraggableCard, which resolves the error, but DraggableCard doesn't show and that's not exacly what I need. It should display the DraggableCard and the text passed. I've already tried to put Some Text around the tag but the problem remains the same.

import React, {Component} from 'react'
import {View} from 'react-native'
import MapView from 'react-native-maps'

import styles from './style'
import DraggableCard from '../../components/DraggableCard'

export default class ChooseMachine extends Component{

  render(){
    return(
      <View style={styles.body}>
        <MapView
          style={styles.map}>

          <DraggableCard>
            Some Text
          </DraggableCard>

        </MapView>

      </View>
    )
  }
}

DraggableCard component

import React, {Component} from 'react'
import { View, Text } from 'react-native'

export default class DraggableCard extends Component {

  render(){

    return(
      <View
        style={styles.containerStyle}>
        <View style={styles.smallHyphen}/>
        <Text>
          {this.props.children}
        </Text>
      </View>
    )
  }
}

I expect to render the DraggableCard on the ChooseMachine component

Upvotes: 9

Views: 9950

Answers (1)

SHG21
SHG21

Reputation: 322

I guess you are seeing that on Android? Try the below.

https://github.com/react-native-community/react-native-maps/issues/1901

Basically, remove the child element from <MapView> and instead position it abolutely.

Upvotes: 16

Related Questions