First, there is a small typo in your example. In your component's constructor you specify a loading state variable, but in your render function you're using isLoading. Second, you're not mapping over your data correctly. It just looks like you need to specify what aspects of each movie you care about in your render function. JSX can't handle displaying a full javascript object which is what <Text>{val}</Text> ends up being in your code. There are a few ways you can fix this. It's very common to just map over your results and display them directly.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dataSource: []
    };
  }
  
  componentDidMount() {
    return fetch("https://reactnative.dev/movies.json")
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          loading: false,
          dataSource: responseJson.movies
        });
      })
      .catch(error => console.log(error));
  }

  render() {
    const { loading, dataSource } = this.state;

    if (loading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0c9" />
        </View>
      );
    }

    return dataSource.map((movie, index) => (
      <View key={movie.id} style={styles.item}>
        <Text>{movie.title}</Text>
      </View>
    ));
  }
}

You could also pull this out to a renderMovies method, which might help since you are trying to display these in a styled container.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dataSource: []
    };
  }
  
  componentDidMount() {
    return fetch("https://reactnative.dev/movies.json")
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          loading: false,
          dataSource: responseJson.movies
        });
      })
      .catch(error => console.log(error));
  }

  renderMovies() {
    const { dataSource } = this.state;

    return dataSource.map((movie, index) => (
      <View key={movie.id} style={styles.item}>
        <Text>{movie.title}</Text>
      </View>
    ));
  }

  render() {
    const { loading } = this.state;

    if (loading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0c9" />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        {this.renderMovies()}
      </View>
    );
  }
}