import { ObservableScreenLayout , ObservableShell , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { StyleSheet } from 'react-native' ; import { Ellipse , Svg } from 'react-native-svg' ; export interface AtomShellProps { screenLayout : ObservableScreenLayout ; shell : ObservableShell ; } @ observer export class AtomShell extends React . Component < AtomShellProps > { public render ( ) { const { width , height } = this . props . screenLayout ; return ( < Svg style = { styles . container } width = { width } height = { height } > < Ellipse cx = { this . props . shell . position . x } cy = { this . props . shell . position . y } rx = { this . props . shell . diameter / 2 } ry = { this . props . shell . diameter / 2 } stroke = "#f38181" strokeWidth = { 1 + StyleSheet . hairlineWidth } fill = "none" / > < /Svg>); } } const styles = StyleSheet . create ( { container : { position : 'absolute' , } , } ) ;