Copyright & Attribution

Components that handle attribution for you

The following components automatically display the version's copyright after the passage text — no extra work required:

• BibleCard
• BibleReader
• VerseOfTheDay

If attribution matters for your screen and you don't need a custom layout, prefer one of these components.

Displaying attribution yourself

BibleTextView gives you full control over layout and does not render copyright for you. When you use it, you are responsible for displaying appropriate attribution.

Unlike the React (web) SDK, the React Native (Expo) SDK does not ship data-fetching hooks, so fetch the version's copyright text from the HTTP API and render it near the passage. The copyright fields live on the Bible version returned by GET /v1/bibles/{bible_id}:

• copyright — short attribution. Display this near the verses.
• promotional_content — longer copyright notice. Suitable for a settings/about screen.

The example below reads your App Key from the provider with useYouVersion rather than threading it through props.

AttributedPassage.tsx
import { BibleTextView } from "@youversion/platform-react-native-expo-ui";
import { useYouVersion } from "@youversion/platform-react-native-expo-core";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";

function AttributedPassage({
  reference,
  versionId,
}: {
  reference: string;
  versionId: number;
}) {
  const { appKey } = useYouVersion();
  // null = still loading; the passage is held until the attribution
  // lookup resolves.
  const [copyright, setCopyright] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    // Clear stale attribution and ignore out-of-order responses so the
    // copyright shown always matches the versionId being rendered.
    let cancelled = false;
    setCopyright(null);
    setFailed(false);
    fetch(`https://api.youversion.com/v1/bibles/${versionId}`, {
      headers: { "X-YVP-App-Key": appKey },
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((version) => {
        // Some versions have no copyright data (e.g. public domain texts).
        // A successful response is authoritative — an empty field means
        // there is nothing to attribute, not an error.
        if (!cancelled) setCopyright(version.copyright ?? "");
      })
      .catch(() => {
        if (!cancelled) setFailed(true);
      });
    return () => {
      cancelled = true;
    };
  }, [versionId, appKey]);

  if (failed) {
    return <Text>Unable to load copyright attribution for this passage.</Text>;
  }
  if (copyright === null) {
    return null; // or a loading indicator
  }

  return (
    <View>
      <BibleTextView reference={reference} versionId={versionId} />
      {copyright !== "" && (
        <Text style={{ fontSize: 12, opacity: 0.6 }}>{copyright}</Text>
      )}
    </View>
  );
}