React without Context Coupling

react-without-context-coupling.jsx

import { Component } from 'react';
import { ScrollView, TextInput } from 'react-native';

// Parent Component
class Card extends Component {
  handleFocus = (y) => {
    this.scrollView.scrollTo({ y });
  }

  render() {
    const {children} = this.props;
    return (
      <ScrollView ref={(r) => {this.scrollView = r}}>
        {children}
      </ScrollView>
    );
  }
}

// Child Component
class CardTextInput extends Component {
  handleFocus = () => {
    if (!this.props.onFocus) return;
    this.props.onFocus(this.yPosition);
  }

  handleLayout = ({nativeEvent:{layout:{ y }}}) => {
    this.yPosition = y;
  }
  
  render() {
    return (
      <TextInput
        onLayout={this.handleLayout}
        onFocus={this.handleFocus}
      />
    );
  }
}

// A developer using your weak non-contextual component
class Cards extends Component {
  render() {
    return (
      <Card ref={(r) => {this.card = r;}}>
        <CardTextInput
          onFocus={this.card && this.card.handleFocus}
        />
      </Card>
    );
  }
}