Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

react native canvas simple example not working

$
0
0

I tried running the example from react-native-canvas but cannot get the purple rectangle to show. What am I doing wrong?

DrawCanvas.tsx:

import React, { Component } from "react";import Canvas from "react-native-canvas";export default class DrawCanvas extends Component {  handleCanvas = (canvas: any) => {    const ctx = canvas.getContext("2d");    ctx.fillStyle = "purple";    ctx.fillRect(0, 0, 100, 100);  };  render() {    return <Canvas ref={this.handleCanvas} />;  }}

App.tsx:

import React from "react";import { StyleSheet, Text, View } from "react-native";import DrawCanvas from "./src/components/DrawCanvas";export default function App() {  return (<View style={styles.container}><DrawCanvas /></View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: "#fff",    alignItems: "center",    justifyContent: "center"  }});

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>